Bootstrap 组件

Bootstrap 组件

 

1.字体图标

Bootstrap3与Bootstrap2的最大差异在于使用了font文件来替代图片，用于显示图标，这些font图片称为Glyphicons--象形文字图标。

可以使用<i>或<span>标签来配合使用，具体如下：

//使用小图标

<i class="glyphicon glyphicon-star"></i>

<span class="glyphicon glyphicon-star"></span>

//也可以结合按钮

<button class="btn btn-default btn-lg">

  <span class="glyphicon glyphicon-star"></span>

</button>

注：可以对字体图标设置字体尺寸font-size、颜色color和应用文本阴影text-shadow。

 

2.按钮组 

按钮组就是多个按钮集成在一个容器里形成独有的效果。

//基本格式

<div class="btn-group">

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

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

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

</div>

//将多个按钮组整合起来便于管理

<div class="btn-toolbar">

  <div class="btn-group">

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

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

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

  </div>

  <div class="btn-group">

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

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

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

  </div>

 </div>

//设置按钮组大小                          

<div class="btn-group btn-group-lg">

<div class="btn-group>

<div class="btn-group btn-group-sm">

<div class="btn-group btn-group-xs">

 

 

3.下拉菜单

.dropdown {  position:relatie;  }

.dropdown-menu {  position:absolute; top:100%;  ... }

.dropdown-toggle 出现点击效果

data-toggle="dropdown"  JS选择器用

使用：保证下拉菜单与触发(button或nav)在同一父元素下。

3.1按钮的下拉菜单

<div class="dropdown">

  <button class="btn btn-default dropdown-toggle"data-toggle="dropdown">

    下拉菜单<span class="caret"></span>

  </button>

  <ul class="dropdown-menu">

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

    <li><a href="#">资讯</a></li>

    <li><a href="#">产品</a></li>

    <li><a href="#">关于</a></li>

  </ul>

</div>

//设置向上触发

<div class="dropup">

//菜单项居右对齐，默认值是dropdown-menu-left

<ul class="dropdown-menu dropdown-menu-right">

//设置菜单的标题，不要加超链接

<li class="dropdown-header">网站导航</li>

//设置菜单的分割线

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

//设置菜单的禁用项

<li class="disabled"><a href="#">产品</a></li>

//让菜单默认显示

<div class="dropdown open">

 

3.2按钮组的下拉菜单

<div class="btn-group">

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

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

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

  <button class="btn btn-default dropdown-toggle"data-toggle="dropdown">

    下拉菜单<span class="caret"></span>

  </button>

  <ul class="dropdown-menu">

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

    <li><a href="#">资讯</a></li>

    <li><a href="#">产品</a></li>

  </ul>

</div>

注：没有class="dropdown"，因为.btn-group有定位{  position:relatie;  }

//分裂式按钮下拉菜单

<div class="btn-group">

  <button type="button"class="btn btn-default">下拉菜单</button>

  <button class="btn btn-default dropdown-toggle"data-toggle="dropdown">

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

  </button>

  <ul class="dropdown-menu">

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

    <li><a href="#">资讯</a></li>

    <li><a href="#">产品</a></li>

  </ul>

</div>

 

3.3导航栏的下拉菜单

<ul class="nav nav-tabs">

  <li class="active"><a href="#">Home</a></li>

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

  <li class="dropdown">

    <a class="dropdown-toggle" data-toggle="dropdown" href="#">

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

    </a>

    <ul class="dropdown-menu">

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

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

    </ul>

  </li>

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

</ul>

 

4.输入框

·向 <form> 元素添加 role="form"。

·把标签和控件放在一个带有 class .form-group 的<div>中。这是获取最佳间距所必需的。

·向所有的文本元素 <input>、<textarea>和<select>添加class ="form-control" (焦点事件)

·<div class="input-group-addon">￥</div>或<span class="input-group-addon">￥</span>放置额外内容，二者是完全等效的。

 

4.1向input输入框添加文本或单复选框

//添加文本

<div class="input-group">  //为input添加边距

<span class="input-group-addon">￥</span>

<input type="text" class="form-control">

</div>

//添加复选框

<div class="input-group">

<span class="input-group-addon">

<input type="checkbox">

</span>

<input type="text" class="form-control">

</div>

 

 

4.2向input输入框添加按钮与下拉菜单

用 .input-group-btn代替 .input-group-addon

//添加按钮

<div class="input-group">

<span class="input-group-btn">

<button class="btn btn-default" type="button">Go!</button>

</span>

<input type="text" class="form-control">

</div>

//添加下拉菜单

<div class="input-group">

<input type="text" class="form-control">

<span class="input-group-btn">

        <button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown">下拉菜单<span class="caret"></span></button>

        <ul class="dropdown-menu pull-right">

            <li> <a href="#">功能</a> </li>

            <li> <a href="#">另一个功能</a> </li>

        </ul>

</span>

</div>

 

 

4.3输入框组的大小

您可以通过向 .input-group 添加相对表单大小的class（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。输入框中的内容会自动调整大小。

 

5.导航元素

5.1基本

对ul添加.nav .nav-tabs或.nav-pills

//标签式的导航菜单

<ul class="nav nav-tabs">

  <li class="active"><a href="#">Home</a></li>

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

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

  <li><a href="#">VB.Net</a></li>

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

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

</ul>

//基本的胶囊式导航菜单

<ul class="nav nav-pills">

  <li class="active"><a href="#">Home</a></li>

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

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

  <li><a href="#">VB.Net</a></li>

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

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

</ul>

 

 

5.2两端对齐

对ul追加.nav-justified

//两端对齐的导航元素

<ul class="nav nav-pills nav-justified">

  <li class="active"><a href="#">Home</a></li>

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

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

  <li><a href="#">VB.Net</a></li>

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

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

</ul>

 

 

5.3垂直的导航菜单

对ul追加 .nav-stacked

//垂直的胶囊式导航菜单

<ul class="nav nav-pills nav-stacked">

  <li class="active"><a href="#">Home</a></li>

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

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

  <li><a href="#">VB.Net</a></li>

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

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

</ul>

 

 

5.4禁用链接.disable与显示.active

对每个li添加了 .disabled，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态。

对每个li添加了 .active，则会创建一个蓝色的链接，。

class 只会改变 <a>的外观，不会改变它的功能。在这里，您需要使用自定义的JavaScript来禁用链接。

<p>导航元素中的禁用链接</p>

<ul class="nav nav-pills">

  <li class="active"><a href="#">Home</a></li>

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

  <li class="disabled"><a href="#">iOS（禁用链接）</a></li>

  <li><a href="#">VB.Net</a></li>

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

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

</ul>

 

 

5.5动态标签

①对li追加data-toggle="tab/pill"（看ul是nav-tabs还是nav-pills）和href="#???"

②要切换的标签最外层用.tab-content的div包围（只tab-content，没有pill-content）

③对各个具体标签加上id和.tab-pane（只tab-pane，没有pill-pane）

④对第一个li加.active选中状态，对对应div加.in。默认div隐藏，加in显示。

<ul class="nav nav-pills">

<li class="active"><a data-toggle="pill" href="#home">首页</a></li>

<li><a data-toggle="pill" href="#menu1">菜单1</a></li>

<li><a data-toggle="pill" href="#menu2">菜单2</a></li>

<li><a data-toggle="pill" href="#menu3">菜单3</a></li>

</ul>

 

<div class="tab-content">

<div id="home" class="tab-pane fade in">

<h3>首页</h3>

<p>菜鸟教程 —— 学的不仅是技术，更是梦想！！！</p>

</div>

<div id="menu1" class="tab-pane fade">

<h3>菜单 1</h3>

<p>这是菜单 1显示的内容。这是菜单1显示的内容。</p>

</div>

<div id="menu2" class="tab-pane fade">

<h3>菜单 2</h3>

<p>这是菜单 2显示的内容。这是菜单2显示的内容。</p>

</div>

<div id="menu3" class="tab-pane fade">

<h3>菜单 3</h3>

<p>这是菜单 3显示的内容。这是菜单3显示的内容。</p>

</div>

</div>

 

 

6.导航栏，导航栏包含5的导航菜单

 

6.1创建一个默认的导航栏的步骤如下：

1向 <nav>标签添加.navbar、.navbar-default。添加 role="navigation"，有助于增加可访问性。

2向 <div>元素添加一个标题div .navbar-header，内部包含了带有.navbar-brand 的<a>元素。这会让文本看起来更大一号。

3为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

注：3中我们添加到是.navbar-nav，而不是.nav-tabs和.nav-pills因为这两个与导航栏.navbar间距不匹配，只能是.navbar-nav

<nav class="navbar navbar-default" role="navigation">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="#">菜鸟教程</a>

</div>

<div>

<ul class="nav navbar-nav">

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

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

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">

Java <b class="caret"></b>

</a>

<ul class="dropdown-menu">

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

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

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

<li><a href="#">Jasper Report</a></li>

</ul>

</li>

</ul>

</div>

</div>

</nav>

 

6.2响应式导航栏

当宽度够宽时，button不显示，<div class="" id="">显示

当宽度不够宽，button显示，<div class="" id="">隐藏

<a class="navbar-brand" href="#">菜鸟教程</a>未被<div class="" id="">包含，总显示

代码：

<nav class="navbar navbar-default" role="navigation">

<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">

<span class="sr-only">切换导航</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">菜鸟教程</a>

</div>

<div class="collapse navbar-collapse" id="example-navbar-collapse">

<ul class="nav navbar-nav">

<li class="active"><a href="#">iOS</a></li>

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

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">

Java <b class="caret"></b>

</a>

<ul class="dropdown-menu">

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

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

<li><a href="#">Jasper Report</a></li>

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

<li><a href="#">分离的链接</a></li>

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

<li><a href="#">另一个分离的链接</a></li>

</ul>

</li>

</ul>

</div>

</div>

</nav>

 

 

6.3导航栏中的表单

注：不在form里的button添加.navbar-btn，添加左浮是因为form或div是块，占整行。

<nav class="navbar navbar-default" role="navigation">

<div class="container-fluid">

    <div class="navbar-header">

        <a class="navbar-brand" href="#">菜鸟教程</a>

    </div>

    <div>

        <form class="navbar-form navbar-left" role="search">

            <div class="form-group">

                <input type="text" class="form-control" placeholder="Search">

            </div>

            <button type="submit" class="btn btn-default">提交按钮</button>

        </form>

        <button type="button" class="btn btn-default navbar-btn">

            导航栏按钮

        </button>

    </div>

</div>

</nav>

 

 

6.4导航栏中的文本

如果需要在导航中包含文本，请使用 class .navbar-text。这通常与<p>标签一起使用，确保适当的前导和颜色。

实例

<nav class="navbar navbar-default" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header">

        <a class="navbar-brand" href="#">菜鸟教程</a>

    </div>

    <div>

        <p class="navbar-text">Runoob用户登录</p>

    </div>

    </div>

</nav>

 

 

6.5带图标的导航链接

<nav class="navbar navbar-default" role="navigation">

    <div class="container-fluid">

        <div class="navbar-header">

            <a class="navbar-brand" href="#">菜鸟教程</a>

        </div>

        <ul class="nav navbar-nav navbar-right">

            <li><a href="#"><span class="glyphicon glyphicon-user"></span>注册</a></li>

            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>登录</a></li>

        </ul>

    </div>

</nav>

 

 

6.6固定到顶部

向 .navbar class 添加class .navbar-fixed-top

因为position：fixed脱离正常流，为了防止导航栏与页面主体中的其他内容的顶部相交错，请向<body>标签添加至少50像素的padding-top，内边距的值根据您的需要设置。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header">

        <a class="navbar-brand" href="#">菜鸟教程</a>

······

 

6.7固定到底部

向 .navbar class 添加class .navbar-fixed-bottom。

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header">

        <a class="navbar-brand" href="#">菜鸟教程</a>

······

 

6.8静态的顶部

即随着页面一起滚动的导航栏，可以什么也不加，默认就是静态的顶部。

或者添加 .navbar-static-top class。该class不要求向<body>添加内边距（padding）。

<nav class="navbar navbar-default navbar-static-top" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header">

        <a class="navbar-brand" href="#">菜鸟教程</a>

······

 

6.9反色的导航栏

为了创建一个带有黑色背景白色文本的反色的导航栏，只需要简单地向 .navbar class添加 .navbar-inverseclass即可。

<nav class="navbar navbar-inverse" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header">

        <a class="navbar-brand" href="#">菜鸟教程</a>

······

 

 

7.面包屑导航

为ul添加.breadcrumb class即可。

<ul class="breadcrumb">

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

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

<li class="active">十一月</li>

</ul>

 

 

8.分页

//默认分页

<ul class="pagination">

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

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

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

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

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

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

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

</ul>

 

//分页大小

<ul class="pagination pagination-lg">  //大

<ul class="pagination ">  //中

<ul class="pagination pagination-sm">  //小

 

//分页状态 .active .disabled

<ul class="pagination">

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

    <li class="active"><a href="#">1</a></li>  //深色显示

    <li class="disabled"><a href="#">2</a></li>  //浅色显示

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

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

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

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

</ul>

 

//翻页，只两个按钮时

<ul class="pager">

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

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

</ul>

 

//翻页，带左(.previous)右(.next)对齐

<ul class="pager">

    <li class="previous"><a href="#">← Older</a></li> 

    <li class="next"><a href="#">Newer →</a></li>  

</ul>

 

//翻页，带状态.disable

<ul class="pager">

    <li class="previous disabled"><a href="#">← Older</a></li>

    <li class="next"><a href="#">Newer →</a></li>

</ul>

 

 

9.标签

<span class="label label-default">默认标签</span>

<span class="label label-primary">主要标签</span>

<span class="label label-success">成功标签</span>

<span class="label label-info">信息标签</span>

<span class="label label-warning">警告标签</span>

<span class="label label-danger">危险标签</span>

 

 

10.徽章（Badges）

徽章与标签相似，主要的区别在于徽章的边角更加圆滑。一般用于数字。

<a href="#">Mailbox <span class="badge">50</span></a>

<a href="#">Mailbox <span class="badge">0</span></a>

<a href="#">Mailbox <span class="badge"></span></a>

 

<li class="active">

    <a href="#"> 首页<span class="badge pull-right">42</span></a>

</li>

<li>

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

</li>

 

 

11.超大屏幕，套一个.jumbotron的div

代码1：原始

<div class="container">

<h1>欢迎登陆页面！</h1>

<p>这是一个超大屏幕（Jumbotron）的实例。</p>

<p><a class="btn btn-primary btn-lg" role="button">

学习更多</a>

</p>

</div>

代码2：套在container里，圆角

<div class="container">

<div class="jumbotron">

<h1>欢迎登陆页面！</h1>

<p>这是一个超大屏幕（Jumbotron）的实例。</p>

<p><a class="btn btn-primary btn-lg" role="button">

学习更多</a>

</p>

</div>

</div>

代码3：套在container外，方角

<div class="jumbotron">

<div class="container">

<h1>欢迎登陆页面！</h1>

<p>这是一个超大屏幕（Jumbotron）的实例。</p>

<p><a class="btn btn-primary btn-lg" role="button">

学习更多</a>

</p>

</div>

</div>

结果比较：

 

 

12.页面标题

设置了边距，并在标题最后增加了分割线

<div class="page-header">

    <h1>页面标题实例

        <small>子标题</small>

    </h1>

</div>

<p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。</p>

 

 

13.缩略图

功能：

1为图片添加四个像素的内边距（padding）和一个灰色的边框。

2当鼠标悬停在图像上时，会动画显示出图像的轮廓。

<a href="#" class="thumbnail">

    <img src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图">

</a>

 

14.警告

//基本警告

<div class="alert alert-success">成功！很好地完成了提交。</div>

<div class="alert alert-info">信息！请注意这个信息。</div>

<div class="alert alert-warning">警告！请不要提交。</div>

<div class="alert alert-danger">错误！请进行一些更改。</div>

 

//可关闭的警告

<div class="alert alert-success alert-dismissable">

  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">

  &times;

  </button>

  成功！很好地完成了提交。

</div>

 

//带链接的警告

<div class="alert alert-success">

    <a href="#" class="alert-link">成功！很好地完成了提交。</a>

</div>

 

 

15.进度条

使用 CSS3 过渡和动画来获得该效果。

Internet Explorer 9 及之前的版本和旧版的 Firefox不支持该特性，Opera 12不支持动画。

注：role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"没什么用

//基本的进度条

外层.progress 的<div>，

内层.progress-bar  style="width:60%;"的<div>。

<div class="progress">

    <div class="progress-bar" style="width: 40%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >

        <span class="sr-only">40% 完成</span>

    </div>

</div>

 

//不同样式的进度条

外层<div>：.progress 

内层<div>：.progress-bar .progress-bar-*  style="width:60%;"

* 可以是 success、info、warning、danger。

<div class="progress">

    <div class="progress-bar progress-bar-success" style="width:90%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ></div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-info" style="width:30%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ></div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-warning" style="width:20%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ></div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-danger" style="width:10%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ></div>

</div>

 

//条纹的进度条

外层<div>：.progress  .progress-striped

内层<div>：.progress-bar .progress-bar-*  style="width:60%;"

* 可以是 success、info、warning、danger。

<div class="progress progress-striped">

    <div class="progress-bar progress-bar-success" style="width:90%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ></div>

</div>

 

//动画的进度条

外层<div>：.progress  .progress-striped  .active

内层<div>：.progress-bar .progress-bar-*  style="width:60%;"

* 可以是 success、info、warning、danger。

<div class="progress progress-striped active">

    <div class="progress-bar progress-bar-success" style="width:90%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ></div>

</div>

//堆叠的进度条

多个进度条放在相同的 .progress 中即可实现堆叠

<div class="progress">

<div class="progress-bar progress-bar-success" style="width: 40%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>

<div class="progress-bar progress-bar-info" style="width: 30%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>

<div class="progress-bar progress-bar-warning" style="width: 20%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>

<div class="progress-bar progress-bar-danger" style="width: 10%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>

</div>

 

 

16.多媒体对象（Media Object）。

这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

//media

<div class="media">

    <a class="pull-left" href="#">

        <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"

             alt="媒体对象">

    </a>

    <div class="media-body">

        <h4 class="media-heading">媒体标题</h4>

        这是一些示例文本。这是一些示例文本。

        这是一些示例文本。这是一些示例文本。

        这是一些示例文本。这是一些示例文本。

    </div>

</div>

 

//media-list

<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">媒体标题</h4>

        <p>这是一些示例文本。这是一些示例文本。</p>

        <!-- 嵌套的媒体对象 -->

        <div class="media">

            <a class="pull-left" href="#"><img class="media-object" src="" alt=""></a>

            <div class="media-body">

                <h4 class="media-heading">嵌套的媒体标题</h4>

                <p>这是一些示例文本。这是一些示例文本。</p>

            </div>

        </div>

    </div>    

</li>

<li class="media">

    <a class="pull-left" href="#"><img class="media-object" src="" alt=""></a>

    <div class="media-body">

        <h4 class="media-heading">媒体标题</h4>

        <p>这是一些示例文本。这是一些示例文本。</p>

    </div>

</li>

</ul>

 

 

17.列表组

为列表添加样式

向元素 <ul> 添加 class .list-group。

向 <li> 添加 class .list-group-item。

<ul class="list-group">

    <li class="list-group-item">免费域名注册</li>

    <li class="list-group-item">免费 Window空间托管</li>

    <li class="list-group-item">图像的数量</li>

    <li class="list-group-item">24*7 支持</li>

    <li class="list-group-item">每年更新成本</li>

</ul>

 

//向列表组添加徽章

我们可以向任意的列表项添加徽章组件，它会自动定位到右边。

只需要在 <li> 元素中添加 <span class="badge"> 即可。

<ul class="list-group">

    <li class="list-group-item">免费域名注册</li>

    <li class="list-group-item">免费 Window空间托管</li>

    <li class="list-group-item">图像的数量</li>

    <li class="list-group-item"> <span class="badge">新</span> 24*7支持</li>

    <li class="list-group-item">每年更新成本</li>

</ul>

 

//可以用<div>代替<ul>，<a>代替<li>

<div>

  <a href="#" class="list-group-item active">免费域名注册</a>

  <a href="#" class="list-group-item">24*7 支持</a>

  <a href="#" class="list-group-item">免费 Window空间托管</a>

  <a href="#" class="list-group-item">图像的数量</a>

  <a href="#" class="list-group-item">

    <h4 class="list-group-item-heading">24*7 支持</h4>

    <p class="list-group-item-text">我们提供 24*7支持。</p>

  </a>

</div>

 

 

18.面板（Panels）。

面板组件用于把 DOM 组件插入到一个盒子中。

创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和class .panel-default 即可

<div class="panel panel-default">这是一个基本的面板</div>

//添加标题

添加内层<div> ：.panel-heading ，其内可带有 .panel-title 的 <h1>-<h6>

//添加主体

添加内层<div> ：.panel-body

//添加注脚

添加内层<div>： .panel-footer 

<div class="panel panel-default">

<div class="panel-heading">

    <h3 class="panel-title">带有title 的面板标题</h3>

</div>

    <div class="panel-body">这是一个基本的面板</div>

    <div class="panel-footer">面板脚注</div>

</div>

 

//带语境色彩的面板

<div class="panel panel-primary">

    <div class="panel-heading"><h3 class="panel-title">面板标题</h3></div>

    <div class="panel-body">这是一个基本的面板</div>

</div>

 

 

//带表格的面板

<div class="panel panel-default">

    <div class="panel-heading"><h3 class="panel-title">面板标题</h3></div>

    <div class="panel-body">这是一个基本的面板</div>

    <table class="table">

        <th>产品</th><th>价格</th>

        <tr><td>产品A</td><td>200</td></tr>

        <tr><td>产品B</td><td>400</td></tr>

    </table>

</div>

 

 

19.Well

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

为了创建 Well，只需要简单地把内容放在带有class .well 的<div>中即可。、

<div class="well">您好，我在 Well中！</div>

 

//使用可选类 well-lg 或 well-sm 来改变Well的尺寸大小。这两个类会影响内边距（padding）

<div class="well well-lg">您好，我在大的 Well中！</div>

<div class="well well-sm">您好，我在小的 Well中！</div>