-
需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”查看全部
-
基础面板看上去太简单了，Bootstrap为了丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果： ☑ panel-heading：用来设置面板头部样式 ☑ panel-footer：用来设置面板尾部样式 <div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <div class="panel-footer">作者：大漠</div> </div>查看全部
-
列表组组件和警告组件一样，Bootstrap为不同的状态提供了不同的背景颜色和文本色，可以使用这几个类名定义不同背景色的列表项。 ☑ list-group-item-success：成功，背景色绿色 ☑ list-group-item-info：信息，背景色蓝色 ☑ list-group-item-warning：警告，背景色为黄色 ☑ list-group-item-danger：错误，背景色为红色查看全部
-
<div class="list-group"> <a href="##" class="list-group-item">图解CSS3</a> <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a> <a href="##" class="list-group-item">玩转Bootstrap</a> </div>查看全部
-
带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单，只需要在“list-group-item”中添加徽章组件“badge”查看全部
-
<ul class="list-group"> <li class="list-group-item">揭开CSS3的面纱</li> <li class="list-group-item">CSS3选择器</li> <li class="list-group-item">CSS3边框</li> <li class="list-group-item">CSS3背景</li> <li class="list-group-item">CSS3文本</li> </ul>查看全部
-
<ul class="media-list"> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src=" " alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Media Header</h4> <div>…</div> </div> </li> <li class="media">…</li> <li class="media">…</li> </ul>查看全部
-
缩略图（二） 上一小节，展示的仅只有缩略图的一种使用方式，除了这种方式之外，还可以让缩略图配合标题、描述内容，按钮等：查看全部
-
媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分： ☑ 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容 ☑ 媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片 ☑ 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容 ☑ 媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选查看全部
-
使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped” 如： <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" ></div>查看全部
-
Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，其主要包括以下四种： ☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色 ☑ progress-bar-success：表示成功进度条，进度条颜色为绿色 ☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色 ☑ progress-bar-danger：表示错误进度条，进度条颜色为红色查看全部
-
.badge:empty { display: none; }查看全部
-
<label class="control-label" for="inputSuccess1">成功状态</label>查看全部
-
分页导航（翻页分页导航） Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。 Bootstrap框架将其独立成一个单独的部分： ☑ LESS版本：对应源文件为pager.less ☑ Sass版本：对应源文件为_pager.scss ☑ 编译后版本：对应bootstrap.css文件第4223行～第4260行 使用方法： 在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类： <ul class="pager"> <li><a href="#">«上一页</a></li> <li><a href="#">下一页»</a></li> </ul> 运行效果见右侧结果窗口。查看全部
-
分页导航（带页码的分页导航） 分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航： ☑ 带页码的分页导航 ☑ 带翻页的分页导航查看全部
举报
0/150
提交
取消