学途无忧

标题: 玩转Bootstrap,全套视频教程学习资料通过百度云网盘下载 [打印本页]

作者: admin 时间: 2021-4-15 04:16
标题: 玩转Bootstrap,全套视频教程学习资料通过百度云网盘下载

资源详情

1基本的HTML模板
2排版

3表单

  3.1表单控件

  3.2表单控件示例

  3.3按钮

  3.4图像

  3.5图标

4网格系统

  4.1网格系统示例

5菜单、按钮组及导航

  5.1下拉菜单

  5.2按钮组

  5.3导航

6导航条、分页导航、标签、徽章

  6.1导航条

  6.2分页导航

  6.3标签

  6.4徽章

7其它内置组件

  7.1缩略图

  7.2警示框

  7.3进度条

  7.4媒体对象

  7.5列表组

  7.6面板

1基本的HTML模板

<!DOCTYPEhtml>

<htmllang="en">

  <head>

    <metacharset="utf-8">

    <metahttp-equiv="X-UA-Compatible"content="IE=edge">

    <metaname="viewport"content="width=device-width,initial-scale=1">

    <title>Bootstrap的HTML标准模板</title>

    

    <linkhref="css/bootstrap.min.css"rel="stylesheet">

    

    <linkhref="css/your-style.css"rel="stylesheet">

    

    

  </head>

  <body>

    <h1>Hello,world!</h1>



    

    <scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

    

    <scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  </body>

</html>

2排版

标题<h1>到<h6>：标题后面紧跟着一行小的副标题使用<small>

<h1>Bootstrap标题一<small>我是副标题</small></h1>

段落<p>

1全局文本字号为14px(font-size)

2行高为1.42857143（line-height），大约是20px、颜色为深灰色（#333）

3字体为"HelveticaNeue",Helvetica,Arial,sans-serif;（font-family）

强调内容

1类lead(突出段落)<pclass="lead">

2文件加粗<strong>

3斜体<em>

4小号(取85%)<small>

5正常<cite>

强调相关的类，示例<divclass="text-warning">：

.text-muted：提示，使用浅灰色（#999）

.text-primary：主要，使用蓝色（#428bca）

.text-success：成功，使用浅绿色(#3c763d)

.text-info：通知信息，使用浅蓝色（#31708f）

.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

文本对齐，示例<pclass="text-right">

.text-left：左对齐

.text-center：居中对齐

.text-right：右对齐

.text-justify：两端对齐

列表

有序列表<ol>

无序列表<ul>

去点列表<olclass="list-unstyled">

内联列表(为制作水平导航而生)<ulclass="list-inline">

定义列表<dl><dt></dt><dd></dd><dd></dd><dl>

水平定义列表<dlclass="dl-horizontal"><dt></dt><dd></dd><dd></dd><dl>，只有屏幕大于768px的时候，添加类名.dl-horizontal才具有水平定义列表效果

代码风格，管使用哪种代码风格，在代码中碰到小于号<要使用硬编码&lt;来替代，大于号>使用&gt;来替代。

<code>：一般是针对于单个单词或单个句子的代码

<pre>：一般是针对于多行代码（也就是成块的代码）

<kbd>:一般是表示用户要通过键盘输入的内容

表格是Bootstrap的一个基础组件之一，在使用Bootstrap表格时，千万注意，你的<table>元素中一定不能缺少类名table。

.table：基础表格

.table-striped：斑马线表格

.table-bordered：带边框的表格

.table-hover：鼠标悬停高亮的表格

.table-condensed：紧凑型表格

.table-responsive：响应式表格，加在容器上，而不是表格table上

表格--表格行的类，要实现悬浮状态，需要在<table>标签上加入table-hover类。bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色

activesuccessinfowarningdanger

3表单

3.1表单控件

使用类名form-control。<inputtype="password"class="form-control"placeholder="请输入您的邮箱密码">

水平表单

1在<form>元素是使用类名form-horizontal

2配合Bootstrap框架的网格系统。

3一个.form-group一行

内联表单，在<form>元素中添加类名form-inline

1此时，在input前面添加一个label标签时，会导致input换行显示。

2如果必须添加这样的一个label标签，并且不想让input换行，需要将label标签也放在容器form-group中

3没有为输入控件设置label标签，屏幕阅读器将无法正确识别。这也是Bootstrap框架另一个优点之处，为残障人员进行了一定的考虑。可以加类隐藏label<labelclass="sr-only">

表单控件(输入框input)

1必须添加type类型

2为了让控件在各种表单风格中样式不出错，需要添加类名form-control

表单控件(下拉选择框select)，原始的一致，多行选择设置multiple属忄生的值为multiple

表单控件(文本域textarea)，和原始使用方法一样，添加了类名“form-control”类名，宽度将为100%或auto

表单控件(复选框checkbox和单选择按钮radio)

1不管是checkbox还是radio都使用label包起来了

2checkbox连同label标签放置在一个名为.checkbox的div容器内

3radio连同label标签放置在一个名为.radio的div容器内

4主要借助.checkbox和.radio样式，来处理复选框、单选按钮与标签的对齐方式。

表单控件(复选框和单选按钮水平排列)

1如果checkbox需要水平排列，只需要在label标签上添加类名.checkbox-inline

2如果radio需要水平排列，只需要在label标签上添加类名radio-inline

表单控件大小

1、.input-sm:让控件比正常大小更小

2、.input-lg:让控件比正常大小更大

3、借住Bootstrap框架的网格系统控制表单宽度

4、.form-group就相当于网格系统中的.row

表单控件状态(禁用状态)

1在需要禁用的表单控件上加上disabled，<inputtype="text"disabled>

2如果fieldset设置了disabled属忄生，整个域都将处于被禁用状态。

表单控件状态(验证状态)

1、.has-warning:警告状态（黄色）

2、.has-error：错误状态（红色）

3、.has-success：成功状态（绿色）

4、为不同状态表单设置icon，只需要在应的状态下添加类名has-feedback

表单提示信息

使用了一个.help-block样式，将提示信息以块状显示，并且显示在控件底部。

在BootstrapV2.x版本中，使用类名help-inline，使在同一行显示

在BootstrapV3.x版本，需要借助于Bootstrap的网格系统

3.2表单控件示例



<formclass="form-horizontal"role="form">

  <h1>登录，大小输入框，验证状态，提示信息</h1>

  

  

  

  <divclass="form-grouphas-errorhas-feedback">

    <labelfor="inputEmail3"class="col-sm-2control-label">邮箱</label>

    

    <divclass="col-sm-4">

      

      

      

      <inputtype="email"class="form-controlinput-lg"id="inputEmail3"placeholder="请输入您的邮箱地址"><span

        class="glyphiconglyphicon-removeform-control-feedbackinput-lg"></span>

    </div>

  </div>

  <divclass="form-grouphas-warning">

    <labelfor="inputPassword3"class="col-sm-2control-label">密码</label>

    <divclass="col-sm-10">

      <divclass="row">

        <divclass="col-xs-6">

          <inputtype="password"class="form-controlinput-sm"id="inputPassword3"placeholder="请输入您的邮箱密码">

        </div>

        

        <spanclass="col-xs-6help-block">你输入的信息是正确的</span>

      </div>

    </div>

  </div>

  <divclass="form-group">

    <divclass="col-sm-offset-2col-sm-10">

      

      <divclass="checkbox">

        <label><inputtype="checkbox">记住密码

        </label>

      </div>

    </div>

  </div>

  <divclass="form-group">

    <divclass="col-sm-offset-2col-sm-10">

      <buttontype="submit"class="btnbtn-primary">进入邮箱</button>

    </div>

  </div>

  <h1>下拉框，禁用下拉第一框</h1>

  <divclass="form-group">

    <selectclass="form-control">

      <optiondisabled>1</option>

      <option>2</option>

    </select>

  </div>

  <h1>水平单选</h1>

  <divclass="form-group">

    <labelclass="radio-inline"><inputtype="radio"name="gender"value="male">男忄生</input>

    </label><labelclass="radio-inline"><inputtype="radio"name="gender"value="female">女忄生</input>

    </label>

  </div>

</form>

3.3按钮

7种按钮风格，3种大小及块状按钮

<buttonclass="btn"type="button">基础按钮.btn</button>

<buttonclass="btnbtn-default"type="button">默认按钮.btn-default</button>

<buttonclass="btnbtn-primary"type="button">主要按钮.btn-primary</button>

<buttonclass="btnbtn-success"type="button">成功按钮.btn-success</button>

<buttonclass="btnbtn-info"type="button">信息按钮.btn-info</button>

<buttonclass="btnbtn-warning"type="button">警告按钮.btn-warning</button>

<buttonclass="btnbtn-danger"type="button">危险按钮.btn-danger</button>

<buttonclass="btnbtn-link"type="button">链接按钮.btn-link</button>

<buttonclass="btnbtn-primarybtn-lg"type="button">大型按钮.btn-lg</button>

<buttonclass="btnbtn-primary"type="button">正常按钮</button>

<buttonclass="btnbtn-primarybtn-sm"type="button">小型按钮.btn-sm</button>

<buttonclass="btnbtn-primarybtn-xs"type="button">超小型按钮</button>

<buttonclass="btnbtn-primarybtn-block"type="button">块状按钮</button>

禁用按钮

1在标签中添加disabled属忄生，可以禁止元素的默认行为的

2在元素标签中添加类名“disabled”，不会禁止按钮的默认行为

3.4图像

<imgclass="img-rounded"alt="140x140"src="http://placehold.it/140x140">

Bootstrap框架中对于图像的样式风格提供以下几种风格：

1、img-responsive：响应式图片，主要针对于响应式设计

2、img-rounded：圆角图片

3、img-circle：圆形图片

4、img-thumbnail：缩略图片

使用方法非常简单，只需要在标签上添加对应的类名

可以通过控制容器的大小来设置图片大小

圆角使用css3，IE8以及其以下版本不支持圆角

3.5图标

<spanclass="glyphiconglyphicon-search"></span>

所有icon都是以glyphicon-前缀的类名开始，然后后缀表示图标的名称

所有名称查看：

请点击：http://getbootstrap.com/components/#glyphicons链接查阅

4网格系统

实现原理

Bootstrap框架中的网格系统就是将容器平分成12份。

工作原理

1、数据行.row必须包含在容器.container中，以便为其赋予合适的对齐方式和内距padding

2、在行.row中可以添加列.col-md-数字，但列数之和不能超过平分的总列数，比如12

3、具体内容应当放置在列容器.col-md-数字之内，而且只有列.col-md-数字才可以作为行容器.row的直接子元素

4、通过设置内距padding从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距margin来抵消内距padding的影响

基本用法

Bootstrap框架的网格系统中有四种基本的用法，架在不同屏幕尺寸使用了不同的网格样式

.col-xs-：屏宽auto，列宽auto

.col-sm-：屏宽750px，列宽~62px

.col-md-：屏宽970px，列宽~81px

.col-lg-：屏宽1170px，列宽~97px

列偏移

1只需要在列元素上添加类名col-md-offset-*(其中星号代表要偏移的列组合数)

2要保证列与偏移列的总数不超过12，不然会致列断行显示

列排序

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名col-md-push-*和col-md-pull-*(其中星号代表移动的列组合数)。

列的嵌套

1可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列

2嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示

4.1网格系统示例

<divclass="container">

  <h4>列向右移动四列的间距</h4>

  <divclass="row">

    <divclass="col-md-4">列1</div>

    <divclass="col-md-2col-md-offset-4">列向右移动四列后的列2</div>

    <divclass="col-md-2">列3</div>

  </div>

  <divclass="row">

    <divclass="col-md-4">列1</div>

    <divclass="col-md-4col-md-offset-4">列向右移动四列后的列2</div>

  </div>

</div>

5菜单、按钮组及导航

5.1下拉菜单

注意

1在Bootstrap框架中的下拉菜单组件是一个独立的组件

2必定会调用Bootstrap框架提供的bootstrap.js文件

3在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果

基本用法

1使用一个名为dropdown的容器包裹了整个下拉菜单元素，示例：<divclass="dropdown"></div>

2使用了一个<button>按钮做为父菜单，并且定义类名dropdown-toggle和自定义data-toggle属忄生，且值必须和最外容器类名一致，示例：data-toggle="dropdown"

3下拉菜单项使用一个ul列表，并且定义一个类名为dropdown-menu，示例：<ulclass="dropdown-menu">

下拉分隔线

可以通过添加一个空的<li>，并且给这个<li>添加类名divider来实现添加下拉分隔线的功能

<lirole="presentation"class="divider"></li>

菜单标题，与添加下拉分隔线类似，添加类名.dropdown-header

<lirole="presentation"class="dropdown-header">第二部分菜单头部</li>

对齐方式

1默认是左对齐

2在dropdown-menu上添加一个pull-right或者dropdown-menu-right类名，让下拉菜单相对于父容器右对齐

3使用dropdown-menu-left，实现与父窗口左对齐

菜单项状态

在对应的菜单项上添加对应的类名，当前状态.active和禁用状态.disabled

示例



<divclass="dropdown">





<buttonclass="btnbtn-defaultdropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown">下拉菜单<spanclass="caret"></span>

</button>





<ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenu1">

  <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">下拉菜单项</a></li>

  <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">下拉菜单项</a></li>

  

  <lirole="presentation"class="disabled"><arole="menuitem"tabindex="-1"href="#">下拉菜单项</a></li>

  

  <lirole="presentation"class="divider"></li>

  

  <lirole="presentation"class="dropdown-header">第二部分菜单头部</li>

  <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">下拉菜单项</a></li>

</ul>

</div>

5.2按钮组

按钮组

使用一个名为btn-group的容器，把多个按钮放到这个容器中

按钮组大小

1.btn-group-lg:大按钮组

2.btn-group-sm:小按钮组

3.btn-group-xs:超小按钮组

按钮工具栏

将按钮组.btn-group按组放在一个大的容器.btn-toolbar

嵌套分组，实现类似于导航菜单的效果。

只需要把当初制作下拉菜单的dropdown的容器换成btn-group，并且和普通的按钮放在同一级

垂直分组

只需要把水平分组的btn-group类名换成btn-group-vertical即可

等分按钮

只需要在按钮组btn-group上追加一个btn-group-justified类名

在制作等分按钮组时，请尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好。

按钮的向下向上三角形

三角形完全是通过CSS代码来实现的

向下三角形：在<button>标签中添加一个<span>标签元素，并且命名为.caret

下拉菜单会向上弹起，在.btn-group类上追加dropup类名

示例

<divclass="btn-wrap">

  

  

  

  

  <divclass="btn-groupbtn-group-lgbtn-group-verticalbtn-group-justified">

    <aclass="btnbtn-default"href="#">首页</a>

    <aclass="btnbtn-default"href="#">产品展示</a>

    <aclass="btnbtn-default"href="#">案例分析</a>

    

    

    <aclass="btnbtn-default"href="#">联系我们<spanclass="caret"></span></a>

  </div>

</div>

5.3导航

在Bootstrap框架将导航独立出来成为一个导航组件

基础样式

Bootstrap框架中制作导航条主要通过.nA危样式。

默认的.nA危样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如nA危-tabs、nA危-pills之类

标签形tab导航，也称为选项卡导航

通过“nA危-tabs”样式来实现。在制作标签形导航时需要在原导航“nA危”上追加此类名

想让某一项为当前选中项，只需要在其<li>标签上添加类名class="active"”即可

实现禁用状态，只需要在标签<li>上添加class="disabled"即可

胶囊形(pills)导航

实现方法和nA危-tabs类似，同样的结构，只需要把类名nA危-tabs换成nA危-pills即可

垂直堆叠的导航

制作垂直堆叠导航只需要在nA危-pills的基础上添加一个nA危-stacked类名

分隔线：在导航项之间添加<liclass=”nA危-divider”></li>

自适应导航

自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。

自适应导航和前面使用btn-group-justified制作的自适应按钮组是一样的。

只不过在制作自适应导航时更换了另一个类名nA危-justified。

二级导航：导航加下拉菜单

将li当作父容器，使用类名dropdown，同时在li中嵌套另一个列表ul

面包屑式导航

面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）

使用方式就很简单，为ol加入breadcrumb类，不支持低版本IE

示例



<ulclass="nA危nA危-pillsnA危-stackednA危-justified">

  

  <liclass="active"><ahref="##">首页</a></li>

  <liclass="dropdown"><ahref="##"class="dropdown-toggle"data-toggle="dropdown">教程<spanclass="caret"></span></a>

    <ulclass="dropdown-menu">

      <li><ahref="##">CSS3</a></li>

      <li><ahref="##">Sass</a></li>

      <li><ahref="##">jQuery</a></li>

      

      <liclass="nA危-divider"></li>

      

      <liclass="disabled"><ahref="##">Responsive</a></li>

    </ul></li>

  <li><ahref="##">关于我们</a></li>

</ul>



<olclass="breadcrumb">

  <li><ahref="#">首页</a></li>

  <li><ahref="#">我的书</a></li>

  <liclass="active">《图解CSS3》</li>

</ol>

6导航条、分页导航、标签、徽章

6.1导航条

导航条基础

在导航条(nA危bar)中有一个背景色、而且导航条可以是纯链接（类似导航）

导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂得多。

基础导航条

1首先在制作导航的列表<ulclass=”nA危”>基础上添加类名nA危bar-nA危

2在列表外部添加一个容器div，并且使用类名nA危bar和nA危bar-default

为导航条添加标题、二级菜单及状态

加入导航条标题：通过nA危bar-header和nA危bar-brand来实现，改良一下可以当作是logo

导航条状态、二级菜单：与导航中的二级导航类似

带表单的导航条

在nA危bar容器中放置一个带有nA危bar-form类名的表单

nA危bar-left让表单左浮动，更好实现对齐

nA危bar-right样式，让元素在导航条靠右对齐

导航条中的按钮、文本和链接

1、导航条中的按钮nA危bar-btn

2、导航条中的文本nA危bar-text

3、导航条中的普通链接nA危bar-link

但这三种样式在框架中使用时受到一定的限制，需要和nA危bar-brand、nA危bar-nA危配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

固定导航条

.nA危bar-fixed-top：导航条固定在浏览器窗口顶部

.nA危bar-fixed-bottom：导航条固定在浏览器窗口底部

页面主内容顶部和底部都被固定导航条给遮住了，解决方法:存在bug及解决方法

1为body加css，padding-top:70px;或padding-bottom:70px;

2固定导航条都放在页面内容前面

.nA危bar-fixed-top~.content{

  padding-top:70px;

}

.nA危bar-fixed-bottom~.content{

padding-bottom:70px;

}

响应式导航条

1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、nA危bar-collapse两个类名。最后为这个div添加一个class类名或者id名。

2、保证在窄屏时要显示的图标样式（固定写法）

3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定

响应式导航条示例

<divclass="nA危barnA危bar-default"role="nA危igation">

<divclass="nA危bar-header">

  

  <buttonclass="nA危bar-toggle"type="button"data-toggle="collapse"data-target=".nA危bar-responsive-collapse">

    <spanclass="sr-only">ToggleNA危igation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span>

  </button>

  

  <ahref="##"class="nA危bar-brand">慕课网</a>

</div>



<divclass="collapsenA危bar-collapsenA危bar-responsive-collapse">

  <ulclass="nA危nA危bar-nA危">

    <liclass="active"><ahref="##">网站首页</a></li>

    <li><ahref="##">系列教程</a></li>

    <li><ahref="##">名师介绍</a></li>

    <li><ahref="##">成功案例</a></li>

    <li><ahref="##">关于我们</a></li>

  </ul>

</div>

</div>

反色导航条

只是将nA危bar-deafult类名换成nA危bar-inverse

导航条示例







<divclass="nA危barnA危bar-defaultnA危bar-fixed-top"role="nA危igation">



<divclass="nA危bar-header">

  <ahref="##"class="nA危bar-brand">慕课网</a>

</div>



<ulclass="nA危nA危bar-nA危">

  <liclass="active"><ahref="##">网站首页</a></li>

  

  <liclass="dropdown"><ahref="##"data-toggle="dropdown"class="dropdown-toggle">系列教程<spanclass="caret"></span></a>

    <ulclass="dropdown-menu">

      <li><ahref="##">CSS3</a></li>

      <li><ahref="##">JA危aScript</a></li>

      <liclass="disabled"><ahref="##">PHP</a></li>

    </ul></li>

  <li><ahref="##">名师介绍</a></li>

  <li><ahref="##">成功案例</a></li>

  <li><ahref="##">关于我们</a></li>

</ul>





<formaction="##"class="nA危bar-formnA危bar-left"rol="search">

  <divclass="form-group">

    <inputtype="text"class="form-control"placeholder="请输入关键词"/>

  </div>

  <buttontype="submit"class="btnbtn-default">搜索</button>

</form>

</div>

6.2分页导航

带页码的分页导航

Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination类

大小设置

pagination-lg让分页导航变大

pagination-sm让分页导航变小

翻页分页导航

翻页分页导航和带页码的分页导航类似，为ul标签加入pager类

previous：让“上一步”按钮居左

next：让“下一步”按钮居右

示例

<ulclass="paginationpagination-lg">

<li><ahref="#">&laquo;第一页</a></li>

<li><ahref="#">11</a></li>

<li><ahref="#">12</a></li>

<liclass="active"><ahref="#">13</a></li>

<li><ahref="#">14</a></li>

<li><ahref="#">15</a></li>

<liclass="disabled"><ahref="#">最后一页&raquo;</a></li>

</ul>

6.3标签

<spanclass="labellabel-default">默认标签</span>

<spanclass="labellabel-primary">主要标签</span>

<spanclass="labellabel-success">成功标签</span>

<spanclass="labellabel-info">信息标签</span>

<spanclass="labellabel-warning">警告标签</span>

<spanclass="labellabel-danger">错误标签</span>

6.4徽章

如果你信息没有看，系统会告诉你有多少信息未读，微信、支付宝中常用伎俩

使用方法

可以像标签一样，使用span标签来制作，然后为他加入badge类

示例



<ulclass="nA危nA危-pills">

<liclass="active"><ahref="#">Home<spanclass="badge">42</span></a></li>

<li><ahref="#">Profile</a></li>

<li><ahref="#">Messages<spanclass="badge">3</span></a></li>

</ul>

<br/>

<ulclass="nA危nA危-pillsnA危-stacked"style="max-width:260px;">

<liclass="active"><ahref="#"><spanclass="badgepull-right">42</span>Home

</a></li>

<li><ahref="#">Profile</a></li>

<li><ahref="#"><spanclass="badgepull-right">3</span>Messages

</a></li>

</ul>

<br/>



<buttonclass="btnbtn-primary"type="button">

Messages<spanclass="badge">4</span>

</button>

7其它内置组件

7.1缩略图

最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。

Bootstrap框架将这一部独立成一个模块组件。并通过thumbnail样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。

在仅有缩略图的基础上，添加了一个div名为caption的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等

示例



<divclass="col-xs-6col-md-3">

  

  <ahref="#"class="thumbnail">

    <imgsrc="http://img.mukewang.com/5434eba100014fe906000338.png"style="height:180px;width:100%;display:block;"alt="">

  </a>

  

  <divclass="caption">

    <h3>Bootstrap框架系列教程</h3>

    <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>

    <p>

      <ahref="##"class="btnbtn-primary">开始学习</a>

      <ahref="##"class="btnbtn-info">正在学习</a>

    </p>

  </div>

</div>

7.2警示框

默认警示框

1、成功警示框：<divclass="alertalert-success"role="alert">

2、信息警示框：<divclass="alertalert-info"role="alert">

3、警告警示框：<divclass="alertalert-warning"role="alert">

4、错误警示框：<divclass="alertalert-danger"role="alert">

可关闭的警示框

1、需要在基本警示框alert的基础上添加alert-dismissable样式。

2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。

3、要确保关闭按钮元素上设置了自定义属忄生：data-dismiss="alert"（因为可关闭警示框需要借助于JA危ascript来检测该属忄生，从而控制警示框的关闭）。

警示框的链接

在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理，并且颜色相应加深。

给警示框加的链接添加一个名为alert-link的类名

示例





<divclass="alertalert-successalert-dismissable"role="alert">

  

  

  <buttonclass="close"type="button"data-dismiss="alert">&times;</button>

  恭喜您操作成功！

  

  <ahref="#"class="alert-link">thisimportantalertmessage</a>

</div>

7.3进度条

基本样式

两个容器，外容器使用progress样式，子容器使用progress-bar样式。

其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度

结构优化：方便残障人员浏览

彩色进度条，只需在基础的进度上增加对应的类名

rogress-bar-info：表示信息进度条，进度条颜色为蓝色

progress-bar-success：表示成功进度条，进度条颜色为绿色

progress-bar-warning：表示警告进度条，进度条颜色为黄色

progress-bar-danger：表示错误进度条，进度条颜色为红色

条纹进度条

只需要在进度条的容器progress基础上增加类名progress-striped

使用CSS3实现

动态条纹进度条

进度条progressprogress-striped两个类的基础上再加入active类名

主要通过CSS3的animation来完成

要让条纹进度条动起来，就需要让progress-striped和active同时运用，不然条纹进度条是不具备动效效果。

层叠进度条

可以将不同状态的进度条放置在一起，按水平方式排列。

层叠进度条宽度之和不能大于100%

带Label的进度条

只需要在进度条中添加你需要的值

示例

<h5>正常层叠进度条（进度之和不能大于100%）</h5>







<divclass="progressprogress-stripedactive">

  

  

  

  <divclass="progress-barprogress-bar-warning"role="progressbar"aria-valuenow="30"aria-valuemin="0"

     aria-valuemax="100"style="width:90%">90%

  </div>

</div>



<divclass="progress">

  

  <divclass="progress-barprogress-bar-success"style="width:20%">20%</div>

  

  <divclass="progress-barprogress-bar-infoprogress-bar-stripedactive"style="width:20%">20%</div>

  <divclass="progress-barprogress-bar-warning"style="width:30%">30%</div>

  <divclass="progress-barprogress-bar-dangerprogress-bar-striped"style="width:15%">危险</div>

</div>

7.4媒体对象

左边居左（或居右），内容居右（或居左）排列

默认媒体对象，一组媒体对象常常包括以下几个部分：

1媒体对像的容器：常使用media类名表示，用来容纳媒体对象的所有内容

2媒体对像的对象：常使用media-object表示，就是媒体对象中的对象，常常是图片

3媒体对象的主体：常使用media-body表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容

4媒体对象的标题：常使用media-heading表示，就是用来描述对象的一个标题，此部分可选

除了上面四个部分之外，在Bootstrap框架中还常常使用pull-left或者pull-right来控制媒体对象中的对象浮动方式。

媒体对象的嵌套

在media-body中添加嵌套

媒体对象列表

在ul上添加类名media-list，而在li上使用media

示例



<divclass="media">

  

  <aclass="pull-left"href="#">

    

    <imgclass="media-object"src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg"alt="...">

  </a>

  

  <divclass="media-body">

    

    <h4class="media-heading">系列：十天精通CSS3</h4>

    <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>

  </div>

</div>



<ulclass="media-list">

  <liclass="media">

    <aclass="pull-left"href="#">

      <imgclass="media-object"src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg"alt="...">

    </a>

    <divclass="media-body">

      <h4class="media-heading">系列：十天精通CSS3</h4>

      <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>

    </div>

  </li>

  <liclass="media">…</li>

  <liclass="media">…</li>

</ul>

7.5列表组

可以用来制作列表清单、垂直导航等效果

基础列表组

list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素

list-group-item：列表项，常用的是li元素，当然也可以是div元素

带徽章的列表组

其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。

只需要在list-group-item中添加徽章组件badge

带链接的列表组，列表项的任何区域都具备可点击

将ul.list-group使用div.list-group来替换

而li.list-group-item直接用a.list-group-item来替换

自定义列表组

list-group-item-heading：用来定义列表项头部样式

list-group-item-text：用来定义列表项主要内容

列表项的状态设置

active：表示当前状态

disabled：表示禁用状态

多彩列表组

在list-group-item基础上增加对应的类名

list-group-item-success：成功，背景色绿色

list-group-item-info：信息，背景色蓝色

list-group-item-warning：警告，背景色为黄色

list-group-item-danger：错误，背景色为红色

示例

<h5>带徽章的列表组</h5>



<ulclass="list-group">

  

  <liclass="list-group-item">

    

    <ahref="##">玩转Bootstrap</a><spanclass="badge">23</span>

  </li>

  <liclass="list-group-item">

    <ahref="##">玩转Bootstrap</a><spanclass="badge">23</span>

  </li>

</ul>

<h5>带链接，在任何区域可点击</h5>

<divclass="list-group">

  <ahref="##"class="list-group-item">

    

    <h4class="list-group-item-heading">Bootstrap<spanclass="badge">23</span></h4>

    

    <pclass="list-group-item-text">玩转Bootstrap玩转Bootstrap玩转Bootstrap</p>

  </a>

</div>

<h5>列表项的状态</h5>

<divclass="list-group">

  

  <ahref="##"class="list-group-itemactive"><spanclass="badge">5902</span>图解CSS3</a>

  

  <ahref="##"class="list-group-itemlist-group-item-success"><spanclass="badge">15902</span>W3cplus</a>

  <ahref="##"class="list-group-item"><spanclass="badge">59020</span>慕课网</a>

  

  <ahref="##"class="list-group-itemdisabled"><spanclass="badge">0</span>Sass中国</a>

</div>

7.6面板

基础面板

一个div容器运用了.panel样式，产生一个具有边框的文本显示块

panel-default控制主题颜色

div.panel-body放置面板主体内容

带有头和尾的面板

panel-heading：用来设置面板头部样式

panel-footer：用来设置面板尾部样式

彩色面板

panel-primary：重点蓝

panel-success：成功绿

panel-info:信息蓝

panel-warning：警告黄

panel-danger：危险红

面板中嵌套表格

在panel-body放置需要的内容，可能是图片、表格或者列表等

把table提取到panel-body外面，效果会比较好

面板中嵌套列表组

与嵌套表格类似

示例





<divclass="panelpanel-primary">

  

  <divclass="panel-heading">玩转Bootstrap</div>

  

  <divclass="panel-body">玩转Bootstrap玩转Bootstrap玩转Bootstrap</div>

  <tableclass="tabletable-bordered">

    <thead>

    <tr><th>test</th><th>test</th></tr>

    </thead>

    <tbody>

    <tr><td>test2</td><td>test2</td></tr>

    </tbody>

  </table>

  

  <divclass="panel-footer">作者：大漠</div>

</div>

欢迎光临学途无忧 (http://xuetu123.com/)