bootstrap最基础的知识应用（寻找其中需要注意的地方）

我打算通过这个笔记来记录自己从bootstrap中学到过的东西，这是一个库，所以存在极大的记忆性，一般来讲不需要记，需要用的时候，我们可以直接去查找就是，但是，所有东西都是看起来简单，但是用起来的时候，才知道其中的磕磕碰碰，所以，自己需要记录下自己用过了其中的什么东西。会持续更新。

1.栅格系统

.col-xs- //当用到这个的时候，任意时候格子都是水平排列的（如果不够12个格子，给多少用多少） .col-sm- //下面这三个用了之后，一旦超越了它们的阈值，就会原来的堆叠变成水平排列，可以利用这个特性设置不同宽度界面的需要 .col-md- .col-lg- .visible-col-xs //这个是指定在这个范围内，就会出现xs原本该存在的效果，其他情况下都是隐藏的，下面同理 .visible-col-sm .visible-col-md .visible-col-lg .hidden-col-xs //这个是指定在这个范围内，就会隐藏xs该存在的效果，其他情况下都是显示的，下面同理 .hidden-col-sm .hidden-col-md .hidden-col-lg .col-xs-offset- //一律是向右偏移自己要的位置 .col-sm-offset- .col-md-offset- .col-lg-offset-

2.表单

.form-group //这个用于一行label，另一行是输入框 .form-control //这个加在输入框内，让输入框元素宽度为width: 100% .form-inline //<form>内加，一行有所有label和输入框 .form-horizontal //<form>内加，一行内有label和输入框，其他对应的label和输入框另起一行

其他的一些简单细节参考官方文档

3.导航

<ul> <li></li> //一般都是<ul>里面接<li> </ul>

4.导航条

（1）区分导航和导航条十分重要； （2）导航条以<nav>开始，里面接链接调到其他地方 （3）下面是部分代码

.container //这个用于居中 .container-fluid //这个用于让变得充满百分之一百

（4）下面是实例的代码

<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> //这里是一个头 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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 <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>

（5）其他细节参考文档

5. 徽章

.badge

6.面板

<div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div>

7.模态框

<div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> //头部 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> //注意class="close" data-dismiss="modal" <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> //身部 <p>One fine body…</p> </div> <div class="modal-footer"> //脚部 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->

8.工具提示

//下面主要看data-toggle="tooltip" data-placement="left" title="Tooltip on left" <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

这个有个要注意的地方是，这个功能不是天生就有的，需要我么主动用js去激活的：

$('#example').tooltip(options)