Tenie Blog

组件

组件包括: 字体图标, 下拉菜单, 导航, 警告框, 弹出框等更多功能的可复用的组件.

分多个部分:

1. 图标

2. 下拉菜单

3. 按钮组

第一部分字体图标

1. 所有可用的图标

Bootstrap中可免费使用Glyphicon免费提供的250个图标.

2. 如何使用

出于性能的考虑, 所以图标都需要一个基类和对应每个图标类.为了设置正确的内补(padding),务必在图标和文本之间添加一个空格.(多个空格也没有,html中只能识别一个空格)

注意:

1. 图标css类不能和其他的css类联合使用

2. 图标类只能单独作用在一个空元素上(元素没有文本和子元素).否则会无效.

3. 默认图标要访问到../fonts目录内,如果修改了, 需要自己用修改几个变量的值再用less编译.

4. 有的设备能阅读屏幕中的内容或Unicode字符, 为了不让屏幕阅读设备对图标产生混淆,可以给图标的元素设置 aria-hidden="true"属性让屏幕阅读设备忽略掉图标元素

3. 实例

可以把它们应用到按钮, 工具条中的按钮组, 导航或输入框等地方; 代码如下:

//一个图标按钮

</button>

//一个图标和文字结合的按钮

<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star

</button>

//一个alert组件(提示信息)中添加了一个图标, 这里还添加了一个.sr-only的文本可让辅助设备知道这个提示所要表达的语义

<span class="sr-only">Error:</span>

Enter a valid email address

</div>

第二部分下拉菜单

1. 实例

将下来菜单触发器(.dropdown-toggle) 和下拉菜单(.dropdown-menu)都包裹在.dropdown类里面,代码如下啊

Dropdown

</button>

<li> <a href="#">Action</a> </li>

<li> <a href="#">Another action</a> </li>

<li> <a href="#">Separated link</a> </li>

</ul>

</div>

.dropdown类让菜单向下弹出, 相对应的.dropup类让菜单向上弹出

2. 对齐

默认情况下, 下拉菜单自动沿着父元素的上沿和左侧被定位为100%宽度,(也就是不在父元素的box中), 为 .dropdown-menu 添加 .dropdown-menu-right类可以让菜单右对齐.左对齐是.dropdown-menu-left

注意:

1) 可能需要额外对菜单定位, 因为不在父元素的box中, 所以,如果菜单草出了视口(viewport), 或设置了verflow属性的父元素而被遮挡了菜单的显示的话, 需要自己解决.

2) 菜单右对齐,不建议使用 .pull-right 类. 在导航条中需要对导航组件(nav)右对齐可以使用.pull-right类.

...

</ul>

3. 标题

在下拉菜单的菜单元素可以使用 .dropdown-header类, 来表明下面的兄弟菜单是一组动作. 其实就该了一点样式,字体颜色变淡

...

<li class="dropdown-header">Dropdown header</li>

...

</ul>

4. 分割线

使用 .divider类在下拉的菜单之间添加一条分割线, 用于将多个链接分组.

...

...

</ul>

5. 禁用的菜单项

只要给某个菜单元素<li> 添加 .disabled类, 就能起到禁用的效果

<li><a href="#">Regular link</a></li>

<li class="disabled"><a href="#">Disabled link</a></li>

</ul>

第三部分按钮组

通过按钮组容器把一组按钮放在同一行里. 可以与按钮插件联合使用,设置为单选框或多选框样式和行为.

提示:

1. 当为 .btn-group 中的元素应用工具提示或弹出框时, 必须设置 container:'body' 选项, 可以避免不必要的副作用(触发提示或弹出框时, 会让页面元素变宽或失去圆角)

2. 为了对辅助阅读器更友好, 给按钮组一个合适的role属性(role="group"); 对应工具栏应该是 role="toolbar"; 还可以明确label标签,下面的例子中用了 aria-label属性 ,还可以使用 aria-labelledby属性

1. 基本实例

<button> 使用 .btn 类, 嵌套在 .btn-group类的元素中,如下:

<button type="button" class="btn btn-default">Middle</button>

<button type="button" class="btn btn-default">Right</button>

</div>

2. 按钮工具栏

把多个 <div class="btn-group">按钮组,放入一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件,

</div>

3. 尺寸

和 .btn-group 一起使用 .btn-group-lg(或-sm,-xs), 可以统一的为按钮组中的按钮设置大小

4. 嵌套

想把下拉菜单混合到一系列按钮中, 就必须把 .btn-group 放入另一个 .btn-group中.

Dropdown <span class="caret"></span>

</button>

<li> <a href="#">Dropdown link A </a> </li>

</ul>

</div>

5. 垂直排列

前面的按钮组都是水平的使用 .btn-group-vertical类, 让按钮组垂直排列

...

</div>

6. 两端对齐排列的按钮组

就是按钮组中的按钮以相同的尺寸,填满父元素的宽度(父元素是屏幕宽,那么按钮们会拉长宽度)

使用的还是 .btn-group-justified类与 .btn-group联合使用, 那么这个btn-group就形成一个块级元素来, 否则按钮组是inline级别的,

用这个.btn-group-justified类时为了浏览器兼容把按钮元素嵌套在单独的<btn-group>中,(button元素一定要包裹一层.btn-group,a标签虽然不用但浏览器兼容会有问题)

注意:

在哪按钮组中的按钮可以是<a>元素的,只有给<a>元素添加 .btn类看起来都一样,但是为了给屏幕阅读器识别是按钮,最好使用role="button"

</div>

<button type="button" class="btn btn-default">Middle</button>

</div>

</div>

第四部分按钮式下拉菜单

和第二部分的下拉菜单用的.dropdown类替换 .btn-group类效果是等价的, 这里主要讲的是利用.btn-group类实现的下拉菜单效果

因为有点击事件所有,依赖下拉菜单插件(js)

1. 单按钮下拉菜单

和第二部分中的一样的用法,只替换了.dropdown类

Action <span class="caret"></span>

</button>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

</ul>

</div>

2. 分裂式按钮下拉菜单

就是按钮管按钮,箭头管下拉菜单,按钮不触发下拉菜单了,等于是2个按钮的按钮组一个按钮控制了下拉菜单

<button type="button" class="btn btn-danger">Action</button>

</button>

<li><a href="#">action</a></li>

<li><a href="#">Separated link</a></li>

</ul>

</div>

3. 尺寸

给按钮单独调整尺寸用 .btn-lg .btn-xs .btn-sm

也可以给按钮组使用 .btn-group-lg .btn-group-xs .btn-group-sm 来调整一组按钮

4. 向上弹出式菜单

.btn-group 联合 .dropup类一起使用, 在第二部分中只使用.dropup类也能实现,但不能实现这里讲到的按钮管按钮,菜单管菜单

</div>

第五部分输入框组

通过在文本输入框<input> 前面, 后面或是两边加文字或按钮,对该表单控件进行拓展.

注意:

1) 只支持<input> 表单控件, 避免使用<select>浏览器兼容有问题, 避免使用<textarea>由于它的rows属性在某些情况下不被支持

2) 输入框组中的工具提示和弹出框需要特别的设置, 为了避免元素变宽变的失去圆角

3) 输入框组内不要嵌套其他表单组了, 也不要嵌套格式列了, 而是嵌套在他们中,最纯粹的使用输入框组

4) 总是为输入框添加对应的<label>标签, 可以隐藏,但不要省略, 实在不想用,最低要求给表单控件加 aria-label ; aria-labelledby; aria-describedby;title或 placeholder 属性;为的是让屏幕阅读器能识别是一个表单控件

1. 基本实例

使用 .input-group-addon类,结合<input>元素,在其任意一侧添加格外标签或按钮, 可以两侧同时添加;

但是:

1) 单独一侧只能添加一个额外的元素(.input-group-addon 或 .input-group-btn)

2) 不支持在单个输入框组中添加多个表单控件

代码如下:

</div>

<span class="input-group-addon" >@example.com</span>

</div>

</div>

<label for="basic-url">Your vanity URL</label>

<span class="input-group-addon" id="foo">https://example.com/users/</span>

</div>

2. 尺寸

和按钮组类似的给输入框组加 .input-group-lg(大) 和 .input-group-sm(小)还有就是默认的3种 , 但按钮有4种还有超小的

</div>

3. "单选框" 或 "多选框" 和输入框的组合

在输入框前面(或后面)加一个单选框或多选框,代码如下:

</span>

</div>

4. 输入框和 "按钮" 的组合

使用的是 .input-group-btn 类了; 代码如下:

</span>

</div>

5. 与 "按钮式下拉菜单" 的组合

直接看代码:

btn <span class="caret"></span>

</button>

<li> <a href="#">Action</a></li>

...

</ul>

</div>

</div>

6. 与"分裂式按钮下拉菜单" 的组合使用

</div>

</div>

7. "多个按钮" 的组合使用

就是在 .input-group-btn中嵌套多个<button>元素即可, 下面代码中可以看到按钮都是嵌套在 .input-group-btn类来, 该类起到的效果和 btn-group一样了

</div>

</div>

第六部分导航

Bootstrap 中的导航组件都依赖 .nav类, 状态类也是共用的, 改变修饰类可以改变样式.

这一章的内容只要讲解"标签页"类型的导航.

提示:

1) 标签页上使用导航组件需要依赖标签页插件,另外还有添加role 和 aria 属性,详细的信息在插件的信息中

2) 确保辅助设备屏幕对导航组件的可访问性: 导航中的组件<ul>元素,在其父元素上需要添加 role="navigation"属性, 或者嵌套在<nav>元素中, 而不是给<ul>原始直接使用该属性,否则辅助设备会误会为一个列表

1. 标签页

标签页样式的导航, 使用 .nav类结合 .nav-tabs类 , .nav定义了是一个导航, .nav-tabs定义了导航的一种样式(它依赖.nav类),示例代码如下:

<li role="persentation" > <a href="#"> Profile</a></li>

<li role="persentation" > <a href="#"> Messages</a></li>

</ul>

2. 胶囊式标签页

该风格的标签页有2种呈现方式, 水平排列和垂直方向排列

1) 水平排序使用 .nav-pills ,代码和上面类似,把 .nav-tabs类替换掉就可以变一种风格了

2) 垂直排列使用 .nav-pills并联合使用 .nav-stacked类,(当然普通标签页也能加这个nav-stacked类,效果显然是不伦不类的)

...

</ul>

3. 两端对齐的标签页

使用 .nav-justifid类, 让一组标签页在其父元素的有效宽度内, 均匀的呈现; 要注意的是在小屏幕上(<768px)会对叠垂直排列

...

</ul>

4. 禁用的链接

对任何导航组件(标签页,胶囊标签页), 都可以添加 .disabled类, 从而实现禁用的样式风格

注意:

.disabled类只不过改变的是样式, 对<a>的功能(点击出发链接)的功能无法改变, 需要自己写Js代码禁用链接

...

<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>

...

</ul>

5. 添加下拉菜单

带下拉菜单的标签页, 只要在一个<li>中加入前面学到下拉菜单代码加入即可

...

Dropdown <span class="caret"></span>

</a>

...

</ul>

</li>

...

</ul>

第七部分导航条

1.默认样式导航条

导航条是应用或网站中作为导航页头的响应式组件, 在手机上可以折叠(并且可开可关), 在视口(viewport)宽度增加时会逐渐变为水平展开模式

注意:

1) 导航条内所包含元素溢出,如果导航条内容太多,溢出,会占2行. 办法: 1.减少内容元素所占的宽度,2.在某些尺寸下把导航条某写元素隐藏 3. 自己修改源码

2) 依赖BootStrap的js插件: 如果js被禁用,会有奇怪现象,内容也可能不见

3) 修改源码中视口的伐值,可以自定义视口在小于多少px时就折叠导航元素, 否则就水平排列, 默认是768px, 可是修改源码中的@rid-float-breakpoint的值

4) 导航条的可访问性: 务必使用语义的<nav>标签, 如果使用通用的<div>元素,务必为其设置属性 role="navigation", 这样辅助设备就能知道了

例子,展饰了一个logo , 导航链接按钮, 下拉菜单,搜索框, 右侧导航按钮

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">Brand</a>

</div>

<li class="active"> <a href="#">Link1</a><span class="sr-only">current</span></li>

Dropdown <span class="caret"></span>

</a>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Separated link</a></li>

</ul>

</li>

</ul>

</div>

<button type="submit" class="btn btn-default">Submint</button>

</form>

Dropdwon_2 <span class="caret"></span>

</a>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

</div>

下面具体分析用到的导航样式类.

2. 品牌图标

使用 .navbar-brand类包裹一个<img>元素来展示品牌logo,(图片尺寸什么的Bootstrap是不到底, 可以自己来覆盖一些padding 或height的值)

</a>

</div>

</nav>

3. 表单

使用 .navbar-form类,来修饰导航中的表单, 让表单呈现很好的垂直对齐, 在手机上可以呈现出折叠状态,

使用对齐类如 .nav-left或.nav-right 可以让其出现在规定的位置上

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

注意

输入框要加<lable>标签,为了辅助设备,不显示可以给其加.sr-only类,一些对于为辅助设备提供可识别标签的方法，

例如， aria-label、aria-labelledby 或者 title 属性如果这些方法都没有，屏幕阅读器将使用 placeholder 属性（如果这个属性存在的话），

但是请注意，使用 placeholder 代替其他识别标签的方式是不推荐的。

4. 按钮

在导航条中的按钮给其使用 .navbar-btn类, 就可以有导航中的样式了,主要是可以更加屏幕变化, 一起变了, 虽然可以给<a> 或<input> 的按钮用, 但不推荐,

5. 文本

在导航中的文本使用 .nav-text类, 可以和其他导航中的元素有这一致的行间距和颜色, 通常作用在<p>元素上

<p class="navbar-text">Signed in as Mark Otto</p>

6. 非导航的链接

导航就是一些按钮, 那如果是一个纯粹的链接,可以使用 .navbar-link类, 让其有这链接该有的的样式,而不是看上去像按钮了

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

7. 组件排列

通过给组件使用 .navbar-left 和 .navbar-right 类,

注意:

一个导航条中只有用一个 .navbar-right类

8. 固定在顶部*

使用 .navbar-fixed-top类, 可以让导航条固定在视口顶部(浏览器页面顶部), 不会因为垂直滚动而消失,一直存在

...

</div>

</nav>

注意:

因为固定在顶部后, 导航条其实会覆盖在内容的上面,可以给body 添加样式padding-top:70px 属性, 这样,初始显示时第一行的内容不会被覆盖了

9. 固定在底部

.navbar-fixed-bottom类, 就字啊浏览器的底部固定了, 和顶部固定一样, 为了不覆盖body中的内容, 可以加样式 padding-bottom:70px的属性值

10. 静止在顶部

.navbar-static-top类, 就是让导航固定在文档的顶部, 会根据文档的滚动而消失, 因为它还是属于整个文档的一部分, 所以不用给body加padding, 它不可能覆盖其他内容的

11. 反色的导航条

添加 .navbar-inverse类,可改变导航条的外观,默认的时候是白色背景, 用这个就会便黑色背景了

...

</nav>

第八部分路径导航

一个带有层次的导航机构中标明当前页面的位置,(类时操作系统中的目录)

使用了 .breadcrumb类修饰在<ol> 列表上

<li> <a href="#">Library</a></li>

</ol>

第九部分分页

为网站或应用提供带有展示页码的分页组件

1. 默认分页

使用.pagination类给<ul>使用, 下面代码展示了:两边放2个箭头按钮, 中间放页面1,2,3 的按钮, 使用起来简单粗暴有效

</ul>

</nav>

注意:

分页组件应该包裹在<nav>元素中,这样辅助设备能知道他是干什么的, 另外, 一个页面可能不之一个导航, 如头部的导航条, 侧边栏,

所以给<nav> 提供一个aria-label属性来注释他是明智的, 例如: 分页组件用在一个搜索结果集的导航,可给aria-label="Search result pages"

1.1 禁用和激活状态

没有特别的类, 只有使用通用的 .disabled 和 .active类 ,表示禁用和激活, 作用在<li>元素上, 可以看上面的例子

注意:

因为分页元素是一个<a>标签,有点击事件, 而Bootstrap的 .disabled类只是一个视觉效果, <a>的默认点击事件还存在, 要没有这个事件还有写js,

有个好方法是, 把<a>标签换成<span>标签就好了

<span>

</span>

</li>

<span>1 <span class="sr-only">(current)</span></span>

</li>

...

</ul>

</nav>

1.2 尺寸

要想更小或更大分页组件,可以分别使用 .pagination-lg 和 .pagination-sm类 ,下例3中尺寸的代码,分别表示大, 默认, 小

2. 翻页

推荐使用简单的标记<< 和 >> 来表示上一页和下一页 ; 或文字

2.1 默认实例

对<ul>使用.pager类,呈现默认的翻页, 链接居中对齐, 就纯粹的上一页和下一页的2个按钮

<li> <a href="#">Previous</a></li>

</ul>

</nav>

2.2 对齐链接

默认的翻页按钮会居中在父元素中, 可以让2个按钮分别2端对齐(左边的左对齐, 右边的右对齐)

对<li>元素分别使用.previous类表示上一页左对齐对应是 .next类

<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>

<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>

</ul>

</nav>

2.3 可选的禁用状态

还是 .disabled类 , 来给按钮一个禁用的样式, 注意<a>链接的话还是有点击事件的

第十部分标签

1. 实列:

使用.label 类还需要一个辅助类,来定义颜色样式下面使用了 label-default类, 呈现一个圆角的背景色和白色字体, 例子代码如下:

<h3>Example heading <span class="label label-default">New</span></h3>

2. 可以的标签外观样式类

除了 label-default类还有其他的颜色样式,如下:

1) label-primary : 蓝背景

2) label-success : 绿背景

3) label-info : 天蓝背景

4) label-warning : 黄背景

5) label-danger : 红背景

注意:

从上面例子可以看到 .label类用在了内联(inline)标签上(span), 如果一个容器里有多个内联元素要用标签类, 而容器比较窄的话,可能会有问题,

解决方式是给使用的标签 display: inline-block的属性

第十一部分徽章

给链接,导航等元素嵌套<span class="badge"> 元素, 可以很醒目的展示新的或未读的信息条目

就好吧手机上那个app图标上显示的数字通知信息, 如下 2个例子:

<a href="#"> Inbox <span class="badge">42</span></a>

Message <span class="badge">4</span>

</button>

提示:

如果<span class="badge"></span> 元素中没有文本, 那么它会隐藏起来

但在IE8中不支持

在配合胶囊式标签页中的,如果是激活的标签页有徽章, 那么徽章的样式和激活的样式相批评的, 不激活就是不激活的样式

<li role="presentation"><a href="#">Profile</a></li>

<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>

</ul>

第十二部分巨幕

这是一个轻量,灵活的组件, 它能延伸至整个浏览器视口来展示网站上的关键内容(这其实说法是不对, 它只是填满的父元素的宽度而已)

使用的是 .jumbotron类

<h1>Hello, world!</h1>

<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

</div>

如果要其他和浏览器一样宽, 就把他放在所以 .container元素的外面(如<body>元素的直接子元素) , 可以在.jumbotron类的元素中嵌套 .container类

...

</div>

第十二部分页头

页头组件(.page-header ) 能给子元素 <h1>加显示效果(增加适当的空间),可以在<h1>中嵌套使用<small>元素(默认效果),还支持在其中使用其他组件

<h1>Example page header <small>Subtext for header</small></h1>

</div>

第十三部分缩略图

是配合栅格一起使用的(例子中可以看到), 可以吧图片,视频也能包含文字等组件的一个组件,有点图片墙的意思, 但它不能想其他第三方组件那样可以根据图片本身的宽高来显示,因为用了栅格是固定高宽的.

第三方组件有 Masonry, lsotope , Salvattore.

1. 默认样式实例

使用到的类是 .thumbnail ; 如下例子,带链接的图片

</a>

</div>

2. 自定义内容

在缩略图组件中还可以在其中添加任何类型的HTML元素, 如,标题,段落,按钮... ,例子如下:

<h3>Thumbnail label</h3>

<p><a href="#" class="btn btn-primary" role="button">Button_1</a> <a href="#" class="btn btn-default" role="button">button_2</a></p>

</div>

第十四部分警告框

警告框组件通过提供一些灵活的预定义消息, 为常见的用户动作提供反馈消息.

1. 实例

警告框组件的基础类是 .alert 并且配合4个修饰类(不同颜色的修饰)一起使用(其实是必须一起用)

修饰类有 .alert-surccess .alert-info .alert-warning .alert-danger ;代码如下:

2. 可关闭的警告框

为警告框添加一个可选的 .alert-dismissible类和一个关闭按钮(依赖js插件),示例代码如下:

</button>

<strong>Warning!</strong> Better check yourself, you're not looking too good.

</div>

3. 警告框中的链接

使用 .alert-link类, 给嵌套在警告框中的链接使用 ;示例如下:

文本文本哦<a href="#" class="alert-link">link_1</a>文本

</div>

第十五部分进度条

通过一些简单, 灵活的进度条, 为当前工作流程或动作提供实时反馈.

注意:

1) 该组件使用到了css3的属性, ie9不支持

2) csp浏览器安全框架 (Content Secruity Policy) ,启用了的话, 直接给元素加style的代码将无效(html中的js也一样).

造成进度条一些样式如宽度等, 不能直接在进度条组件上写style了,解决方案就是写一些自定义的样式在css的单独文件中,在引如html中

1. 基本实例

使用.progress为基类(外轮廓), 子元素用到 .progress-bar类(内部在增长的条), 默认样式的进度条:

<span class="sr-only"> 60% Complete</span>

</div>

在展示时,如果刚开始,进度条很还没多少,如还想让文本清晰可见, 可给进度条设置 min-width属性, 示例如下:

</div>

2. 根据情景变化效果

进度条组件也有各种颜色的样式和前面的组件类似, 根据不同情景使用不同的颜色和 .progress-bar类结合使用,样式有如下几种:

1) progress-bar-success : 绿色

2) progress-bar-info : 天蓝

3) progress-bar-warning : 黄色

4) progress-bar-danger: 红色

5) 不使用样式类, 就是默认的蓝色

<span class="sr-only">40% Complete (success)</span>

</div>

3. 条纹效果

可以再结合 .progress-bar-striped类让原来就一种颜色的进度条变成条纹色的

<span class="sr-only">40% Complete (success)</span>

</div>

4. 动画效果

让条纹动起来, 只要再添加一个 active 类即可,ie9不支持

<span class="sr-only">45% Complete</span>

</div>

5. 堆叠效果

将多个.progress-bar 加入到 .progress 中, 呈现推叠效果(每个.progress-bar要有自己的颜色才能看的出)

</div>

第十六部分 (多)媒体对象

这是一个抽象的组件, 用以构建不同类型的组件, 具有文本内容和图片(视频等)在组件中左或右侧对齐,(类似博客评论或Twitter消息,有一个头像在右侧,文字靠近图像对齐)

1. 默认样式

默认的媒体对象组件, 就一个内容块和一个多媒体内容的组合;

</a>

</div>

<h4 class="media-heading">Media heading</h4>

<p>hehehhehe</p>

</div>

在以前 .pull-left和.pull-right 可以作用在媒体组件的子元素上, 现在使用的是 .media-left和.media-right类,

需要注意的是 .media-right的元素是放在.media-body的元素的后面

对齐

图片类型的元素, 可以在顶部,中部或底部对齐, 默认是顶部对齐.(也就是在整个媒体组件中的上下的一个位置)

使用的类是 .media-middle : 在中间 .media-bottom : 在底部 ;是和 .media-left或.media-right类配合使用

2. 媒体对象列表

就是在媒体对象组件中嵌套使用,

子媒体对象组件在 .media-body元素中嵌套. 此时需要给父媒体对象组件包裹 .media-list(作用在<ul>); 示例代码如下:

</a>

</div>

<h4 class="media-heading">Media heading</h4>

文本....

</div>

</li>

</ul>

第十七部分列表组

列表组是灵活又强大的组件, 不仅能用来显示一组简单的元素, 还能用于复杂的定制的内容(可是说,可以做为一个基础设施的组件,如格栅那样的基础设施)

1. 基本实例

使用的是 .list-group类,子元素使用 .list-group-item类; 一般作用在<ul>标签和子标签<li>上.但也不是强制的,是可以在其他标签上的,如<div> ...

最简单的列表组件就是一个无序列表, 使用了Bootstrap提供的对应类. 可以在这个基础上定制自己的css

<li class="list-group-item">Cras justo odio</li>

<li class="list-group-item">Dapibus ac facilisis in</li>

<li class="list-group-item">Morbi leo risus</li>

</ul>

2. 徽章 -- 结合徽章使用

在列表组中加入徽章组件, 徽章会自动被放在右边

<span class="badge">14</span> Cras justo odio

</li>

</ul>

3. 链接

使用<div>代替<ul>;<a>代替<li> ,构建一个全部是连接的列表组.

</div

4. 按钮

列表组的元素也可以直接就是按钮,(和连接类似,必须用<div>嵌套<button>,不使用<ul>了),特别注意的是<button>不在使用 .btn类了

<button type="button" class="list-group-item active">Cras justo odio</button>

<button type="button" class="list-group-item">Dapibus ac facilisis in</button>

<button type="button" class="list-group-item">Morbi leo risus</button>

</div>

5. 被禁用的条目

为.list-group-item 元素添加 .disabled类, 可以让该子元素显示为灰色,表现被禁言的效果.

6. 情境类

结合使用 .list-group-item-success :绿色

.list-group-item-info :天蓝

.list-group-item-waring :淡黄

.list-group-item-danger :淡红

让列表元素拥有这个背景色, 还有一个 .activel类,可以让列表元素呈现激活的颜色(深蓝色),而且还会覆盖情境类的颜色

<li class="list-group-item list-group-item-success disabled">Dapibus ac facilisis in</li>

<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>

<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>

<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>

</ul>

7. 定制内容

前面说了列表可以作为一个基础设施来使用,它的列表项中可以是任何HTML元素,示例代码如下

</a>

.....

</div>

第十八部分面板

算是个基础组建,没有必要, 但是某些时候可能需要将某些DOM内容放在一个盒子里, 对于这种情况,可以试试面板组件.

对于整个布局来说,可以有几个面板组成,我们的组件在面板中呈现,层次更分明些

1. 基本实例

默认的 .panel组件所做的只是设置基本的边框(border)h和内补(padding)来包含内容

Basic panel example

</div>

2. 待标题的面板

通过 .panel-heading 可以很简单地为面板加入一个标题容器. 在它里面的子元素可以使用 .panel-title类的

通过添加设置了.panel-title类的<h1>~<h6>标签添加一个预定义样式的标签,不过<h1>~<h6>的原生样式会被覆盖

<div class="panel-heading">Panel heading without title</div>

Panel content

</div>

<h3 class="panel-title">Panel title</h3>

</div>

Panel content

</div>

3. 带脚注的面板

可以把按钮或次要的文本放入 .panel-footer类的元素中, 注意,面板的脚注部分不会从情境效果过继承颜色

Panel content

</div>

<div class="panel-footer">Panel footer</div>

</div>

4. 情境效果

和其他组件一样, 可以使用一些情境效果的状态类,给面板不同的背景色

和.panel一起使用 .panel-primary 等类,示例代码如下

5. 带表格的面板

在面板中如果使用到<table>,表格不需要边框的话给其加上 .table类即可, 这样表格和面板中的元素看起来更像一个整体,

在.panel-body中使用的表格会给表格叫一个上边框看起有一个分隔效果(和其他元素).

<div class="panel-heading">Panel heading</div>

<p>Some dh ultricies vehicula ut id elit.</p>

</div>

<thead>

<tr>

<th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

<th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td>

</tr>

</tbody>

</table>

</div>

如果没有 .panel-body ，面版标题会和表格连接起来，没有空隙。

<div class="panel-heading">Panel heading</div>

...

</table>

</div>

6. 带列表组的面板

可以简单地在任何面板中加入具有最大宽度的列表组

<div class="panel-heading">Panel heading</div>

</div>

<li class="list-group-item">Cras justo odio</li>

<li class="list-group-item">Dapibus ac facilisis in</li>

<li class="list-group-item">Morbi leo risus</li>

</ul>

</div>

第十九部分具有响应式特性的嵌入内容

可以嵌入外部内容的一个组件, 该组件会自动根据浏览器的大小调节其自身的比例;

所谓嵌入内容如:<iframe>(主要是它), <embed>, <video>和<obje> 元素, 该容器组件(使用 .embed-responsive 和 embed-responsive-16by9 ..配合使用)

其子元素如<iframe> 使用 .embed-responsive-item类; 注意<iframe>元素不需要设置frameborder="0"属性了,Bootstrap已经做了.

</div>

</div>

第二十部分 Well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>

1. 默认效果

2. 可选类/样式

调整大小的样式类 .well-lg .well-sm

喜欢