/.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项，给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类，给ul加 .nav-stacked: 垂直排列BootStrap

<meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no">

BootStrap是一种前端框架

BootStrap布局

 必须放在这两个容器中的其中一个

 <div class="container></div>  或者<div class="container-fluid"></div>

排版的标签

   .page-header是对于<h1>~<h6>中的标题，并且给标题一个分割线

   <small></samll>:副标题 小一号；   <big></big>:副标题 大一号

  <strong></strong> <em></em>   <del></del>

对于文本（都有前缀text）

.text-right ：右对齐

.text-left：左对齐

.text-center:居中

对于设置英文大小写问题（也属于文本的一部分，所有也有前缀text）

.text-uppercase：对文本中的英文字母全都大写

.text-lowercase:对文本中的英文字母全都小写

.text-capitalize: 对文本中的英文首字母大写

对于列表

.list-unstyled：去除列表前面的符号和去掉原有的格式

.list-inline:  把<li></li>之间的内容变成横向排列

对于自定义的列表

.dl-horizontal：设置变成横向排列

<dl class="dl-horizontal">

<dt>标题</dt>

<dd>内容</dd>

</dl>

表格（table）

.table:代表表格一个基类，（基本的类加其他的效果都是在.table的基础上）

.table:没有外边框

.table-bordered:给表格加上外边框

.table-hover: 鼠标悬停效果，鼠标一到行或者单元格就会变色

.table-striped:斑马线效果，隔行换色，这个与鼠标悬停没有任何关系，一打开页面就会显示

.table-condensed:让表格看起来变得紧凑

 响应式表格(也是表格，就要以table为前缀)

.table-responsive:给table的父元素加，以移动设备（手机，平板等，360浏览器不是移动设备）为优先，如果内容不能完全显示，会出现响应式的滚动条响应设备的窗口的大小

<div  class="table-responsive">

    <table class="table table-hover table-bordered, table-striped table-condensed">

         <tr>编号</tr>

对于行的状态类

行的标签有<tr>或者<td>

下面这几个状态类对是对于行来做处理的

 .action :鼠标悬停在行或者单元格时所设置的颜色

.success.标识成功或积极的工作

.info: 标识普通的提示信息或者动作

.warning : 标识警告或者需要用户注意

.danger: 标识危险或者潜在的带有负面影响的动作

<tr class="danger">

响应式图片（一般是和栅格系统一起使用,既然是图片那么他的前缀是img）

 .img-responsive: 响应式图片

.img-circle:椭圆形

.img-rounder:改变了图片的四个角，变成曲面的

.img-thumbnail:给图片加了圆角边框

<div class="container-fluid">

      <img scr="img/1.jpg" class="img-responsive ">

栅格系统（一定要放在容器中）

必须放在

<div class="container"></div>或者<div class="container-fluid"></div>

栅格系统的作用：栅格系统，浏览器窗口自动分配最多12列，栅格系统是由行（row）和列(col)构                             成，就是把我们的屏幕分成12份，在里面放东西

一行里面有12列： col-md-1:代表一列，所有的列都是一定放在行里的

超出12列就会换到下一行

col-md-4:数字是几就代表在一行中占几列

 需求：在一行里面，第一块占两列，第二个块占三列，第三个块占7列

<div class="row">

　　<div class="col-md-2">22<div>

　　<div class="col-md-3">33<div>

　　<div class="col-md-7">77<div>

</div>

需求：pc端的， 中等屏幕，一行显示三张图片

下面只是其中一个

<div class="container">

  <div class="row">

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

　　　　<img src="imgs/1.jpg" class="img-responsive" alt="别说">

　　　　<h3 class="page-header">标题</h3>

         　　<p>内容哈哈哈</p>

　　　　<div>

　　<div>

<div>

栅格系统的参数

如果想做成响应式效果，使用栅格系统参数

小于768手机端                     col-sx-

大于768小于992平板           col-sm-

大于992小于1200                col-md-

大于1200                             col-lg-

 案例：pc机大屏幕显示四张图片，pc机中等屏幕显示三张图片，平板显示两张图片，手机端显示              一张图片

 <div class="container" >

　　<div class="row">

 　　　　<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

　　　　　　<img src="images/1.jpg" class="img-responsive">

              </div>

       </div>

</div>

栅格系统的偏移（只能向右偏移）

语法:是col-xs/sm/md/lg-offset-数值

注意：如果超出本行就会从下一行重新算起

<div class="row">

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

　　<div class="col-md-2 col-md-offset-3">22</div>

</div>

栅格系统的排序（了解）

语法：col-xs/sm/md/lg-pull-数值 向左偏移

          col-xs/sm/md/lg-pull-数值  向右偏移

<div class="row">

　　<div class="col-md-4 col-md-push-8">55</div>

       <div class="col-md-8 col-md-push-4">44</div>

</div>

辅助类样式

1.情景文本颜色：.text-muted(柔和)， .text-success(成功的颜色)   .text-primary(初始化颜色)

                           .text-info(信息的颜色)  .text-waring(警告的颜色)    .text-danger(危险的颜色）

 2.背景文本颜色（五种）： bg-success      .bg-primary      bg-info       bg-waring    bg-danger

3.下拉三角：语法：<span class="caret"></span>:这种中间没有内容

表单， 复选框，单选框

1.表单：class="form-group":这是分组，是为了两者上下有距离，给输入框的父元素加，给外面包           含的盒子加，但是只是在表单的范围内

          边框样式用 for-control; 作用的标签有<input><textarea>加

2.复选框

            .checkbox-inine:给label标签加，给包含<input>和内容加

　　　disabled:禁止的意思，不能选中，也不能修改，不过这只是在框里禁止，并没有在文字上

          如果想要在文字上禁止的要

   <label class="checkbox-inline disabled"><input type="checkbox" name="hoddy" disabled>           敲代码</label>

3.单选框

  .radio-inline:给label标签加，包含<input>包含加

<div class="form-group">

　<label class="radio-inline"><input type="radio" name="sex" value="男">男</label>

　<label class="radio-inline disabled"><input type="radio" name="sex" value="男" disabled>男</label>

</div>

复选框

  .input-group-addon:给组合的内容加

.input-group:给父元素加

.form-control:把输入框变成圆角

<div class="input-group>

　　<span class="input-group-addon">搜索</span>//也可以放在input后面

　　<input type="search" name="sc" id="sc" class="form-control">

</div>

------------------------

在<span class="glyphicon glyphicon-user"></span>图标中一定不要加内容

<div class="input-group">

　<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>

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

</div>

响应是表单

坐表单是可以省略行

.form-horizontal:给表单加form

响应式效果，一定结合栅格系统

注意：输入框不能划分栅格系统的，如果想使用栅格系统，可以给<div><span>..加

按钮

普通按钮，可以加按钮效果的有哪些标签，下面这三个

<input type="button" value="按钮">

或者

<button type="button">按钮<button>

或者

<a href="">内容</a>，也可以使用按钮

.btn是按钮样式的基类

.btn-primary   .btn-defalut   .btn-success  .btn-warning  .btn-danger

<div class="container">

　　<button class="btn btn-primary">确定要删除吗</button>

　　<input type="button" value="修改" class= “btn btn-default”>

       <a href="#" class="btn btn-danger">修改内容</a>

</div>

action：是激活的意思，当鼠标放在上面颜色会发生变化

设置按钮的大小：btn-lg(大的)， .btn-sm(中等)   .btn-xs(最小的常用的)

<a href="#" class="btn btn-danger btn-lg" >修改内容</a>

按钮组：用的是btn-group，就是把所有的按钮连在一起

btn-group:是个父元素加，至于class里面的btn-success这个东西可以不同

<div class="btn-group">

　　<button class="btn btn-success">修改按钮</button>

　　<button class="btn btn-danger" >修改按钮</button>

</div>

 

标签页

 

.nav-tabs :是普通标签页

.nav-pills:胶囊式标签页

action ;默认的激活项，给<li>加默认显示的是哪个标签页内容

.nav是标签页的一个基类，给ul加

.nav-stacked: 垂直排列

 

导航