Bootstrap 基本用法(续)

2019-06-26 作者:计算机教程   |   浏览(128)

在bootstrap中有很多的组件,这些组件可以帮组我们更快的写出一些好看的样式,下面就是一些样式:

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

导航框

列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。列表组可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码:

<ul >    <li ><a  >Home</a></li>    <li><a  >Profile</a></li>    <li><a  >Messages</a></li>  </ul>  

LESS:list-group.less
SASS:_list-group.scss

  样式:

列表组看上去就是去掉了列表符号的列表项,并且配上一些特定的样式,在bootstrap框架中的基础列表组主要包括两个部分:

          图片 1

list-group:列表组容器,常用的是ul元素,也可以是ol或div元素

禁用&激活链接:

<ul >    ...    <li ><a  >Disabled link</a></li><!- 便可以禁用链接->
 <li class="active"><a href="#">1 (current)</a></li><!-class="active"便可以链接->

 ... 
</ul>

list-group-item:列表项,常用的是li元素,也可以是div元素

下拉菜单

<div >    <button  type="button" id="dropdownMenu1" data-toggle="dropdown">      Dropdown          </button>    <ul  role="menu" aria-labelledby="dropdownMenu1">      <li role="presentation"><a role="menuitem" tabindex="-1"  >Action</a></li>      <li role="presentation"><a role="menuitem" tabindex="-1"  >Another action</a></li>      <li role="presentation"><a role="menuitem" tabindex="-1"  >Something else here</a></li>      <li role="presentation" ></li>      <li role="presentation"><a role="menuitem" tabindex="-1"  >Separated link</a></li>    </ul>  </div>  

对于基础列表组并没有做过多的样式设置,主要设置了其间距、边框和圆角等;

默认分页:

  

<ul >    <li><a  >«</a></li>    <li><a  >1</a></li>    <li><a  >2</a></li>    <li><a  >3</a></li>    <li><a  >4</a></li>    <li><a  >5</a></li>    <li><a  >»</a></li>  </ul>  

  样式:

                            图片 2

进度条:

  

<div >    <div  role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"  >      40% Complete (success)    </div>  </div>  <div >    <div  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"  >      20% Complete    </div>  </div>  <div >    <div  role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"  >      60% Complete (warning)    </div>  </div>  <div >    <div  role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"  >      80% Complete    </div>  </div>  

  样式:

                   图片 3

  

.list-group {
padding-left: 0;
margin-bottom: 20px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
.list-group-item:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}

定制内容

在里面可以加几乎任何HTML,甚至是像下面的带链接的列表组。

  

<div >    <a   >      <h4 >List group item heading</h4>      <p >...</p>    </a>  </div>  

  样式:

        图片 4

这些为在bootstrap中较为常用的,还有更多的css样式这里就没一一列举了;要这些样式只需要直接复制这些代码就可以了,要改变其中的一些细节样式可以改变其中的class;


来看一个例子:

<h1>基础列表组</h1>
<ul class="list-group">
<li class="list-group-item">腊肉土豆焖饭</li>
<li class="list-group-item">香辣风味炸鸡块</li>
<li class="list-group-item">香菜皮蛋豆腐</li>
<li class="list-group-item">荷兰豆炒马蹄</li>
<li class="list-group-item">山楂排骨</li>
<li class="list-group-item">韭菜炒河虾</li>
</ul>

图片 5

带徽章的列表组

带徽章的列表组其实就是将bootstrap框架中的徽章组件和基础列表组件结合在一起的一个效果,具体做法很简单,只需在.list-group-item的基础上追加徽章组件“badge”

实现原理:

给徽章设置了一个右浮动,当然如果两个徽章同时在一个列表项中出现时,还设置了它们之间的距离

.list-group-item > .badge {
float: right;
}
.list-group-item > .badge   .badge {
margin-right: 5px;
}

例子:

<h1>带徽章的列表组</h1>
<ul class="list-group">
<li class="list-group-item">
13
腊肉土豆焖饭
</li>
<li class="list-group-item">
20
香辣风味炸鸡块
</li>
<li class="list-group-item">
12
香菜皮蛋豆腐
</li>
<li class="list-group-item">
5
荷兰豆炒马蹄
</li>
<li class="list-group-item">
8
山楂排骨
</li>
<li class="list-group-item">
15
韭菜炒河虾
</li>
</ul>

图片 6

带链接的列表组

带连接的列表组其实就是每个列表项都具有链接效果,一般让人想到的就是在基础列表组的基础上,给列表项的文本添加链接,如:

<ul class="list-group">
<li class="list-group-item"><a href="#">腊肉土豆焖饭</a></li>
<li class="list-group-item"><a href="#">香辣风味炸鸡块</a></li>
<li class="list-group-item"><a href="#">香菜皮蛋豆腐</a></li>
<li class="list-group-item"><a href="#">荷兰豆炒马蹄</a></li>
<li class="list-group-item"><a href="#">山楂排骨</a></li>
<li class="list-group-item"><a href="#">韭菜炒河虾</a></li>
</ul>

效果如下:

图片 7

这样做有个不足之处,就是链接的点击区域只在文本上有效;但很多时候都希望在列表项的任何区域都具备可点击,这是就需要在链接标签上增加额外的样式:display:block;但在bootstrap框架中,还是采用了另一种实现方式,就是将ul.list-group用div.list-group来替换,li.list-group-item用a.list-group-item来替换,这样就可以达到需要的效果。

实现原理:

如果使用a.list-group-item,样式就需要做一定的处理,如:去文本下划线,增加悬浮效果等;下面是css源码:

a.list-group-item {
color: #555;
}
a.list-group-item .list-group-item-heading {
color: #333;
}
a.list-group-item:hover,
a.list-group-item:focus {
color: #555;
text-decoration: none;
background-color: #f5f5f5;
}

带链接列表组的运用:

<h1>带链接的列表组</h1>
<ul class="list-group">
<a class="list-group-item" href="#">腊肉土豆焖饭</a>
<a class="list-group-item" href="#">香辣风味炸鸡块</a>
<a class="list-group-item" href="#">香菜皮蛋豆腐</a>
<a class="list-group-item" href="#">荷兰豆炒马蹄</a>
<a class="list-group-item" href="#">山楂排骨</a>
<a class="list-group-item" href="#">韭菜炒河虾</a>
</ul>

效果如下:

图片 8

本文由www.2003.com发布于计算机教程,转载请注明出处:Bootstrap 基本用法(续)

关键词: