BootStrap教程从入门到精通

时间:2021-10-13 14:32:23

Bootstarp

引入bootstarp:(包含文件bootstarpjq):注意:min.js先引入

<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <script src="jquery/jquery.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

 

或者:

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

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 

.栅格

1.系统在多种屏幕设备上的工作

在大于等于设定的屏幕大小时,平铺;在小于设定的屏幕大小时堆叠

1.超小屏幕设备手机 <768px  col-xs-      2.小屏设备平板 >=768px  -col-sm-

3.中等屏幕设备桌面 >=992px  col-md-     4.大屏幕设备桌面 >=1200px    col-lg-

2.一行分为12列,超过12溢出在下一行

:<div class="row">

    <div class="col-sm-4">11111111</div>

    <div class="col-sm-3">11111111</div>

    <div class="col-sm-1">11111111</div>

<div class="col-sm-4">11111111</div>

</div>

 

3.同时适应多屏幕设备:

例:<div class="row">

<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>

        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

</div>

4.解决某些列过高问题:加入

<div class="clearfix visible-xs"></div>

5.列偏移:

<div class="col-xs-6 col-xs-offset-4" >11111111</div>  向右偏移

6.列嵌套:

<div class="row">

  <div class="col-xs-4 col-xs-offset-4" >

    <div class="col-xs-4 col-xs-offset-4" style="background:red"> 11111</div>

  </div>

</div>

7.列排序:

<div class="row">

  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> 左边空3个单元

  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>   右边空9个单元

</div>

.文本

1.p标签

1.标题标签h1-h6,以及副标题标签<small></small>

2.文本对齐:

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

3.强调颜色;

<p class="text-muted">111111</p>    无色

<p class="text-primary">22222</p>    天蓝色

<p class="text-success">33333</p>  绿色

<p class="text-info">44444</p>  深蓝色

<p class="text-warning">55555</p>    黄色

<p class="text-danger">66666</p>  红色

<p class="text-light">浅灰色文本(白色背景上看不清楚)。</p>

<p class="text-white">白色文本(白色背景上看不清楚)。</p>

dark深灰色

 

2.span标签

 

<span class="label label-default">Default</span>

<span class="label label-primary">Primary</span>

<span class="label label-success">Success</span>

<span class="label label-info">Info</span>

<span class="label label-warning">Warning</span>

<span class="label label-danger">Danger</span>

 

3.缩略语、引用

1.缩略语:把长句缩略成短句,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上

<abbr title="*">中国</abbr>

2.引用:例:名人名言

<blockquote>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>

</blockquote>

4.列表

1.无样式列表:<ul class="list-unstyled">  <li>22222222222222222</li> </ul>

2.内联列表:将所有内容放在一列:<ul class="list-inline"> <li>111111 </li> </ul>

3.水平排列:<dl class="dl-horizontal">  <dt>1111</dt> <dd>1111111</dd></dl>

7.块级帮助文本:<span class="help-block">自己独占一行或多行的块级帮助文本。</span>

8.静态控件

将一行纯文本放置于label的同一行,为<p>元素添加.form-control-static

 <label class="col-sm-2 control-label">Email</label>

 <div class="col-sm-10">

     <p class="form-control-static">email@example.com</p>

 </div>

5.徽章

 

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

对齐方式:<a href="#"> <span class="badge pull-right">42</span>  </a>

结合导航:

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

  <li class="active">

    <a href="#">

      <span class="badge pull-right">42</span>

      Home

    </a>

  </li>

</ul>

6.缩略图

1.图片缩略

 

<div class="row">

  <div class="col-xs-6 col-md-3">

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

      <img data-src="holder.js/100%x180" alt="...">

    </a>

  </div>

  ...</div>

 

2.栅格系统的图像、视频、文本

 

<div class="row">

  <div class="col-sm-6 col-md-4">

    <div class="thumbnail">

      <img data-src="holder.js/300x200" alt="...">

      <div class="caption">

        <h3>Thumbnail label</h3>

        <p>...</p>

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

      </div>

    </div>

  </div>

 

 

 

7.警告框

1.普通警告框

 

<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="well well-lg">111</div>  well well-lg修饰内补丁,即内边距

 

2.可以关闭的警告框

 

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

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

   <strong>Warning!</strong> Best check yo self, you're not looking too good.

</div>

 

3.带链接的警告框

 

<div class="alert alert-success">

   <a href="#" class="alert-link">...</a>

</div>

<div class="alert alert-info">

   <a href="#" class="alert-link">...</a>

</div>

<div class="alert alert-warning">

   <a href="#" class="alert-link">...</a>

</div>

<div class="alert alert-danger">

   <a href="#" class="alert-link">...</a>

</div>

 

8.进度条

1. 进度条

 

<div class="progress">

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

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

  </div></div>

<div class="progress">

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

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

  </div></div>

<div class="progress">

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

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

  </div></div>

<div class="progress">

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

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

  </div></div>

颜色:不写默认蓝色,progress-bar-success绿色,*-info青,*-warning深黄,*-danger红色

进度效果:默认无

 

2. progress-striped 条纹

 

<div class="progress progress-striped">

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

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

  </div></div>

3. progress-striped active 运动条纹

 

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

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

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

  </div></div>

 

4.堆叠效果

 

<div class="progress">

  <div class="progress-bar progress-bar-success" style="width: 35%">

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

  </div>

  <div class="progress-bar progress-bar-warning" style="width: 20%">

    <span class="sr-only">20% Complete (warning)</span>

  </div>

  <div class="progress-bar progress-bar-danger" style="width: 10%">

    <span class="sr-only">10% Complete (danger)</span>

  </div></div>

 

9.媒体列表

 

<div class="media">

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

    <img class="media-object" src="..." alt="...">

  </a>

  <div class="media-body">

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

    12345

  </div>

</div>

10.列表组

a).基本案例

 

<ul class="list-group">

  <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>

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

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

</ul>

 

b).加入徽章

 

<ul class="list-group">

  <li class="list-group-item">

    <span class="badge">14</span>

    Cras justo odio

  </li>

</ul>

 

c).链接条目

 

<div class="list-group">

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

    Cras justo odio

  </a>

  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>

  <a href="#" class="list-group-item">Morbi leo risus</a>

  <a href="#" class="list-group-item">Porta ac consectetur ac</a>

  <a href="#" class="list-group-item">Vestibulum at eros</a>

</div>

 

d).定制内容

 

<div class="list-group">

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

    <h4 class="list-group-item-heading">List group item heading</h4>

    <p class="list-group-item-text">12345</p>

  </a>

</div>

 

11.面板

1.普通面板

 

<div class="panel panel-primary">...</div>

<div class="panel panel-success">...</div>

<div class="panel panel-info">...</div>

<div class="panel panel-warning">...</div>

<div class="panel panel-danger">...</div>

 

2.栏目+表格

 

<div class="panel panel-default">

  <!-- Default panel contents -->

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

 

  <!-- Table -->

  <table class="table">

    ...

  </table></div>

 

 

3.栏目+文章+表格

 

<div class="panel panel-success">

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

  <div class="panel-body">

    <p>文章</p>

  </div>

  <table class="table">

    <tr><td>123</td><td>456</td></tr>

    <tr><td>111</td><td>222</td></tr>

  </table>

</div>

 

4. 带列表组的面板

 

<div class="panel panel-default">

  <!-- Default panel contents -->

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

  <div class="panel-body">

    <p>...</p>

  </div>

  <!-- List group -->

  <ul class="list-group">

    <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>

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

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

  </ul></div>

 

 

12.超大屏幕

宽度100%显示

 

<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>

13.折叠内容

简单:

 

<button type="button" class="btn btn-primary" data-toggle="collapse"

data-target="#demo">

简单的可折叠组件

</button>

<div id="demo" class="collapse in">

Nihil anim keffiyeh helvetica, craft beer labore wes anderson

cred nesciunt sapiente ea proident. Ad vegan excepteur butcher

vice lomo.

</div>

 

<div class="panel-group" id="accordion">

  <div class="panel panel-default">

    <div class="panel-heading">

      <h4 class="panel-title">

        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">

          标题一

        </a>

      </h4>

    </div>

    <div id="collapseOne" class="panel-collapse collapse in">

      <div class="panel-body">

        内容一 ...

    </div>

  </div>

  <div class="panel panel-default">

    <div class="panel-heading">

      <h4 class="panel-title">

        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

          标题二

        </a>

      </h4>

    </div>

    <div id="collapseTwo" class="panel-collapse collapse">

      <div class="panel-body">

        内容二 ...

      </div>

    </div>

  </div>

  <div class="panel panel-default">

    <div class="panel-heading">

      <h4 class="panel-title">

        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">

          标题三

        </a>

      </h4>

    </div>

    <div id="collapseThree" class="panel-collapse collapse">

      <div class="panel-body">

        内容三 ...

      </div>

    </div>

  </div>

</div>

.表格

1.基本案例:每两行中间带一条细线

 

<table class="table">

  <tr>   <td>111</td>   <td>222</td>   </tr>

  <tr>   <td>111</td>   <td>222</td>   </tr>

</table>

 

2.条纹状表格:隔行换色,单数行灰色,偶数行无色,两行之间有细线

 

<table class="table table-striped">

  <tr>   <td>111</td>   <td>222</td>   </tr>

  <tr>   <td>111</td>   <td>222</td>   </tr>

</table>

 

3.带边框的表格

 

<table class="table table-bordered">

  <tr>   <td>111</td>   <td>222</td>   </tr>

  <tr>   <td>111</td>   <td>222</td>   </tr>

</table>

 

4.鼠标悬停:悬停后灰色

 

<table class="table table-hover">

  <tr>   <td>111</td>   <td>222</td>   </tr>

  <tr>   <td>111</td>   <td>222</td>   </tr>

</table>  

 

5.紧缩表格:表格更小,更紧凑

 

<table class="table table-condensed">

  <tr>   <td>111</td>   <td>222</td>   </tr>

  <tr>   <td>111</td>   <td>222</td>   </tr>

</table>  

 

6.状态class

 

.active鼠标悬停的颜色,灰色          .success标识成功或积极的动作,绿色

.warning标识警告或需要注意,黄色    .danger标识危险或潜在的带来负面影响的动作,红色

例如:行上加:<tr class="success"><td>222</td></tr>

  列上加:<td class="danger">...</td>

 

7.响应式表格

 

在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失

<div class="table-responsive">   表格       </div>

四.表单

1. 基本案例:

 

<form role="form">

  <div class="form-group">

    <label for="exampleInputEmail1">Email address</label>

    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">

  </div>

  <div class="form-group">

    <label for="exampleInputPassword1">Password</label>

<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

  </div>

  <div class="form-group">

    <label for="exampleInputFile">File input</label>

    <input type="file" id="exampleInputFile">

    <p class="help-block">Example block-level help text here.</p>

  </div>

  <div class="checkbox">

    <label>

      <input type="checkbox"> Check me out

    </label>

  </div>

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

</form>

2.内联表单

 

表单左对齐显示,宽口小于768px,表单折叠,注意:一定要为每个输入要空间laber,并加class=”sr-only”

<form class="form-inline" role="form">

<div class="form-group">

<label class="sr-only" for="exampleInputEmail2">Email address</label>

<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">

</div>

<div class="form-group">

<label class="sr-only" for="exampleInputPassword2">Password</label>

<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">

</div>

<div class="checkbox">

 <label> <input type="checkbox"> Remember me </label>

  </div>

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

</form>

3.水平排列的表单

 

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

  <div class="form-group">

    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">

    </div>

  </div>

  <div class="form-group">

    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <div class="checkbox">

        <label>

          <input type="checkbox"> Remember me

        </label>

      </div>

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

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

    </div>

  </div>

</form>

4.表单控件

默认宽度100%,获取焦点有蓝色边框。大部分表单控件、文本输入域控件。包括HTML5支持的所有类型:textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor

例:<input type="color" class="form-control" placeholder="Text input">

5.文本域

 row设置行高:<textarea class="form-control" rows="3"></textarea>   

6.checkboxradio

默认堆叠

 

例:<div class="checkbox">

    <label>  <input type="checkbox" value=""> Option   </label>

</div>

<div class="radio">

 <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option </label>

</div>

<div class="radio">  

<label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option</label>

</div>

 

一行显示:.checkbox-inline

例:<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label>

<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label>

<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label>

7.Select

 

单选下拉:<select class="form-control">

   <option>1</option>  <option>2</option> <option>3</option>

</select>

多选下拉:<select multiple class="form-control">

   <option>1</option>  <option>2</option>  <option>3</option>

</select>

 

下拉按钮:颜色defaultprimarysuccessinfowarningdanger

 

<div class="btn-group">

  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">

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

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

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

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

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

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

  </ul>

</div>

上弹菜单:大小:btn-xs  btn-sm   btn-md  btn-lg

 

<div class="btn-group dropup">

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

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

  </button>

  <ul class="dropdown-menu">

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

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

  </ul>

</div>

 

 

分裂式下拉菜单

 

<div class="btn-group">

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

  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">

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

  </button>

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

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

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

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

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

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

  </ul>

</div>

 

禁用下拉按钮: <div class="btn-group">

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

      Dropdown

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

    </button>

    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">

   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>

  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>

   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>

</ul>

  </div>  

8.禁用文本框

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

9.表单校验

 

<div class="form-group has-success">

<label class="control-label" for="inputSuccess">Input with success</label>

<input type="text" class="form-control" id="inputSuccess">    //绿色

</div>

<div class="form-group has-warning">

<label class="control-label" for="inputWarning">Input with warning</label>

<input type="text" class="form-control" id="inputWarning">   //棕色

</div>

<div class="form-group has-error">

<label class="control-label" for="inputError">Input with error</label>

<input type="text" class="form-control" id="inputError">   //红色

</div>

10.控件尺寸

通过.input-lg之类的class可以为控件设置高度,通过.col-lg-*之类的class可以为控件设置宽度。

<div class=" col-sm-6">

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

</div>

五.按钮

1.按钮颜色

 

 <button type="button" class="btn btn-default">Default</button>   //默认灰色按钮

<button type="button" class="btn btn-primary">Primary</button>  //蓝色

<button type="button" class="btn btn-success">Success</button>   //绿色

<button type="button" class="btn btn-info">Info</button>         //蓝色

<button type="button" class="btn btn-warning">Warning</button>  //深黄

<button type="button" class="btn btn-danger">Danger</button>    //红色

<button type="button" class="btn btn-link">Link</button>        //按钮转链接

2.按钮尺寸

 

btn-lg大  btn-md中等(默认)  btn-sm小   btn-xs超小

例:<button type="button" class="btn btn-primary btn-lg">Large button</button>      

3.加载按钮

 

<button type="button" data-loading-text="正在加载..." class="btn btn-primary">

  Loading state</button>

4.按钮充满父元素

例:<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

5.活动状态

按钮点击被压下,边框颜色深,内置阴影

<button type="button" class="btn btn-default btn-lg active">Button</button>

6.链接转按钮

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>

7.禁用链接

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

8.禁用

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">button</button>

9.单选按钮

 

<label class="btn btn-primary">

    <input type="radio" name="options" id="option1"> 1

  </label>

  <label class="btn btn-primary">

    <input type="radio" name="options" id="option2"> 2

  </label>

  <label class="btn btn-primary">

    <input type="radio" name="options" id="option3"> 3

  </label>

 

10.按钮组

 

a).<div class="btn-group">

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

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

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

</div>

 

  b).并排按钮组:

 

<div class="btn-toolbar" role="toolbar">

  <div class="btn-group">

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

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

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

  </div>

  <div class="btn-group">

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

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

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

  </div>

</div>

 

  c).按钮组尺寸

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

<div class="btn-group">...</div>

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

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

d).按钮组下拉框组合:

 

<div class="btn-group">

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

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

  <div class="btn-group">

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

      Dropdown

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

    </button>

    <ul class="dropdown-menu">

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

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

    </ul>

  </div>

</div>

竖直排列:<div class="btn-group-vertical">   最外层div

两端对齐,100%显示: <div class="btn-group-justified">    最外层div

 

六.图片

 

1.<img src="..." alt="..." class="img-rounded">  圆角矩形

<img src="..." alt="..." class="img-circle">     

<img src="..." alt="..." class="img-thumbnail"> 带内空白的矩形

2.响应式图片:<img src="..." class="img-responsive" alt="Responsive image">

3.关闭按钮:<button type="button" class="close" aria-hidden="true">×</button>

4.快速浮动:<div class="pull-left">...</div>左浮动  <div class="pull-right">...</div>右浮动

注:导航条中用.navbar-left .navbar-right

5.清除浮动:<div class="clearfix">...</div>

6.显示、隐藏:<div class="show">111</div> <div class="hidden">222</div>

7.块级元素在不同屏幕上的显示(其它尺寸的屏幕隐藏)

显示:.visible-xs  <768px           .visible-sm  768px-992px

.visible-md  992px-1200px    .visible-lg   >=1200px

隐藏:.hidden-xs   .hidden-sm   .hidden-md   .hidden-lg

七.图标

Bootstrap 提供了 glyphicons-halflings.png 和 glyphicons-halflings-white.png 两个图标文件,它们的效果完全相同。不同的是,前者是白底黑色图标,后者是黑底白色图标。

每个图标都需要依附于一个 <i> 标签,并且赋予唯一的一个类(class)。任何需要使用图标的地方,只需给 <i> 标签添加以 .icon- 为前缀的类即可。比如,要使用搜索图标,就给 <i> 标签添加 .icon-search 类,例如:

 

 

用户 <i class="icon-user"></i>   家  icon-home     、购物车:icon-shopping-cart

上传下载链接:  icon-open     icon-save    icon-link

搜索:  icon-search  分享  icon-share     icon-share-alt

刷新:  icon-refresh   加载:  icon-repeat   发送:  icon-send

上下左右单箭头:icon--arrow-up    icon-arrow-down    iconicon-arrow-left     icon-arrow-right

上下左右尖角号: icon-chevron-up   icon-chevron-down  icon-chevron-left    icon-chevron-right

快进、快退:  icon-forward       icon-backward

上一首、下一首:  icon-fast-forward      icon-fast-backward

播放、暂停、停止:  icon-play    icon-pause    icon-stop

声音大小: icon-volume-up       icon-volume-down   静音: icon-volume-off

闹钟:  icon-bell   耳机:  icon-headphones

手机电话:  icon-phone-alt     icon-phone

条形码 icon-barcode    二维码 icon-qrcode  icon-book   书签 icon-bookmark      

相机、录像机  icon-camera    icon-facetime-video

音乐、电影:  icon-music      icon-film

列表、定位:  icon-list     icon-map-marker

放大缩小:  icon-zoom-in     icon-zoom-out

警告:icon-warning-sign   修理:icon-wrench   回形针icon-paperclip

八.导航

1.细线导航

 

<ul class="nav nav-tabs">

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

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

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

</ul>

2.胶囊导航

 

<ul class="nav nav-pills">

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

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

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

</ul>

Pills 可以竖直堆叠。只要加上.nav-stacked

 

3.面包屑导航

 

<ol class="breadcrumb">

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

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

  <li class="active">Data</li>

</ol>

4.堆叠胶囊导航

 

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

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

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

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

</ul>

5.两端对齐细线导航

 

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

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

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

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

</ul>

6.两端对齐胶囊导航

 

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

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

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

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

</ul>

禁用链接

对任何导航(包括标签页,pills,或列表,加入disabled使链接为灰色且没有鼠标悬停效果。

7.带下拉框的细线导航

 

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

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

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

  <li class="dropdown">

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

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

    </a>

    <ul class="dropdown-menu">

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

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

    </ul>

  </li>

</ul>

8.带下拉菜单的胶囊导航

 

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

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

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

  <li class="dropdown">

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

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

    </a>

    <ul class="dropdown-menu">

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

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

    </ul>

  </li>

</ul>

9.默认导航条

 

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

  <!-- Brand and toggle get grouped for better mobile display -->

  <div class="navbar-header">

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

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

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

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

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

    </button>

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

  </div>

 

  <!-- Collect the nav links, forms, and other content for toggling -->

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

    <ul class="nav navbar-nav">

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

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

      <li class="dropdown">

        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

        <ul class="dropdown-menu">

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

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

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

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

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

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

          <li><a href="#">One more separated link</a></li>

        </ul>

      </li>

    </ul>

    <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">Submit</button>

    </form>

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

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

      <li class="dropdown">

        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

        <ul class="dropdown-menu">

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

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

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

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

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

        </ul>

      </li>

    </ul>

  </div>

</nav>

10.导航添加

1.表单

<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">Submit</button>

</form>

2.按钮

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

3.文本

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

10.导航位置

1.固定定位上部<nav class="navbar navbar-default navbar-fixed-top" role="navigation">  </nav>

2.固定定位下部<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">  </nav>

3.静止在上部:<nav class="navbar navbar-default navbar-static-top" role="navigation">   </nav>

4.静止在下部:<nav class="navbar navbar-default navbar-static-bottom" role="navigation">   </nav>

11.反色导航条

 

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

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

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

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

</ul>

</nav>

12分页和翻页

1.分页.active是当前页

 

<ul class="pagination">

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

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

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

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

</ul>

禁止点击:<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>

尺寸:<ul class="pagination pagination-lg">...</ul>

<ul class="pagination">...</ul>

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

2.翻页

 

<ul class="pager">

  <li><a href="#">上一页</a></li>

  <li><a href="#">下一页</a></li>

</ul>

两边对齐

<ul class="pager">

  <li class="previous"><a href="#">← 上一页</a></li>

  <li class="next"><a href="#">下一页 →</a></li>

</ul>

可选禁用

<ul class="pager">

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

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

</ul>

九.js插件

1.弹框

 

<div class="container" style="padding: 100px 50px 10px;" >

    <button type="button" class="btn btn-default" title="Popover title"

            data-container="body" data-toggle="popover" data-placement="left"

            data-content="左侧的 Popover 中的一些内容">

        左侧的 Popover

    </button>

    <button type="button" class="btn btn-primary" title="Popover title"

            data-container="body" data-toggle="popover" data-placement="top"

            data-content="顶部的 Popover 中的一些内容">

        顶部的 Popover

    </button>

    <button type="button" class="btn btn-success" title="Popover title"

            data-container="body" data-toggle="popover" data-placement="bottom"

            data-content="底部的 Popover 中的一些内容">

        底部的 Popover

    </button>

    <button type="button" class="btn btn-warning" title="Popover title"

            data-container="body" data-toggle="popover" data-placement="right"

            data-content="右侧的 Popover 中的一些内容">

        右侧的 Popover

    </button>

</div>

 

<script>

$(function (){

    $("[data-toggle='popover']").popover();

});

</script>

 

 

2.

 

<div class="container" style="padding: 100px 50px 10px;" > <button type="button" class="btn btn-default popover-show" title="Popover title" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容 —— show 方法"> 左侧的 Popover </button> <button type="button" class="btn btn-primary popover-hide" title="Popover title" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容 —— hide 方法"> 顶部的 Popover </button> <button type="button" class="btn btn-success popover-destroy" title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容 —— destroy 方法"> 底部的 Popover </button> <button type="button" class="btn btn-warning popover-toggle" title="Popover title" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容 —— toggle 方法"> 右侧的 Popover </button><br><br><br><br><br><br> <p class="popover-options"> <a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>" data-container="body" data-toggle="popover" data-content=" <h4>Popover 中的一些内容 —— options 方法</h4>"> Popover </a> </p> <script>

$(function () { $('.popover-show').popover('show');}); $(function () { $('.popover-hide').popover('hide');}); $(function () { $('.popover-destroy').popover('destroy');}); $(function () { $('.popover-toggle').popover('toggle');}); $(function () { $(".popover-options a").popover({html : true });});

</script> </div>

 

2.模态框(弹框)

 

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 弹窗 </button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

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

×</button>

        <h4 class="modal-title" id="myModalLabel">标题</h4>

      </div>

      <div class="modal-body"> 内容 </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

        <button type="button" class="btn btn-primary">保存</button>

      </div>

    </div>

  </div>

</div>

 

3.轮播图

 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->

  <ol class="carousel-indicators">

    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

    <li data-target="#carousel-example-generic" data-slide-to="1"></li>

    <li data-target="#carousel-example-generic" data-slide-to="2"></li>

  </ol>

  <!-- Wrapper for slides -->

  <div class="carousel-inner">

    <div class="item active">

      <img src="..." alt="...">

      <div class="carousel-caption">

        ...

      </div>

    </div>

    ...

  </div>

  <!-- Controls -->

  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left"></span>

  </a>

  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right"></span>

  </a></div>

 

 

2.

 

轮播切换时间:$(function(){   $('.carousel').carousel({ interval:200 });  });

从左到右循环各帧:.carousel('cycle')   停止轮播:.carousel('pause')

将轮播定位到指定的帧上(帧下标以0开始,类似数组):.carousel(number)

返回到上一帧:.carousel('prev')   转到下一帧:.carousel('next')

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->

  <ol class="carousel-indicators">

    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

    <li data-target="#carousel-example-generic" data-slide-to="1"></li>

    <li data-target="#carousel-example-generic" data-slide-to="2"></li>

  </ol>

  <!-- Wrapper for slides -->

  <div class="carousel-inner">

    <div class="item active">

      <img src="3.png" alt="..." width=100%>

      <div class="carousel-caption">

        <h3>标题一</h3>

        <p>内容一</p>

      </div>

    </div>

    <div class="item">

      <img src="3.png" alt="..."  width=100%>

      <div class="carousel-caption">

        <h3>标题二</h3>

        <p>内容二</p>

      </div>

    </div>

    <div class="item">

      <img src="3.png" alt="..."  width=100%>

      <div class="carousel-caption">

        <h3>标题三</h3>

        <p>内容三</p>

      </div>

    </div>

  </div>

  <!-- Controls -->

  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">

    <  icon-chevron-left"></span>

  </a>

  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">

    <  icon-chevron-right"></span>

  </a>

</div>

10.特效

1.滚动监听

 

 

 

 

 

2.导航

 

 

 

3.轮播

 

4.form、缩略图、折叠

5.面板

6.表格

7.输入框、搜索框、单复选框、下拉选框