bootstrap学习笔记之一

一、概要

　　bootstrap是最受欢迎的HTML、css和js框架，用于开发响应式布局，移动设备优先的WEB项目。

二、CSS部分

　　1、bootstrap已经设定了基本的全局样式，如font-family，font-size，line-height，为链接设定了基本的颜色（绿蓝色），并且当链接处于hover状态时增加下划线。

　　2、两个布局容器：container和container-fluid；如下所示，container布局容器在不同的宽度的设备中宽度是不一样的，而container-fluid的宽度始终未为100%；

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min- 768px) {
  .container {
     750px;
  }
}
@media (min- 992px) {
  .container {
     970px;
  }
}
@media (min- 1200px) {
  .container {
     1170px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

　　由上可知，第一、栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ，即col-xs类的样式可以运用到平板和电脑上，但是如果文件中还设定了col-sm、col-md、col-lg类，则会覆盖col-xs的样式。

　　第二、container类在平板和电脑端都是固定宽度的，如1170px，970px，750px，所以在平板和电脑端是不会充满全屏的，而在手机端container和container-fluid类一样是充满全屏的。因为在手机端container的宽度为自动auto了。

　　第三，通过实验可以看出，container分别有左右15px的内边距，而里面的div通过row类设定margin-left：-15px,margin-right:-15px，可以实现新的row类重新得到container的宽度。而row类里边的col-md类也有默认的15px的内边距，或许大家就会疑惑，比如row类中包括两个col-md-6的div类，而且设定了border，此时他们怎么可能还在一行呢？不是撑不下了吗！没错，col-md-6的宽度都为50%，按照我们传统的想法，还设定了左右的15px的padding，还设定border，肯定是撑不下了的，原因在此。bootstrap中的所有元素box-sizing设定的是怪异模式中的border-box，而不是传统的content-box。即50%的宽度中已经包括了padding和border。

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

　3、栅格系统

.row {
  margin-right: -15px;
  margin-left: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
   100%;
}
.col-xs-11 {
   91.66666667%;
}
.col-xs-10 {
   83.33333333%;
}
.col-xs-2 {
   16.66666667%;
}
.col-xs-1 {
   8.33333333%;
}

　　由上可知，栅格系统的宽度实现就是通过百分比来实现的。上面已经说过了，此时的宽度是border-box，即包括padding又包括border。

　　4、偏移量的实现

.col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }

　　5、列排序的实现

.col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-0 {
    left: auto;
  }
 .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-0 {
    right: auto;
  }

　　6、排版

　　　　1)small标签在和h1~h6标签中作副标题;

　　　　2)页面主体： font-size：14px; line-height: 1.428; p标签还设定了10px的底部外边距（margin）;

　　　　3).lead类名让段落p进行凸显；　　　

.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 300;
line-height: 1.4;
}

　　　　4)mark、del、s、ins、u、small、strong、em等标签；

　　　　5)文本对齐方式类名：text-left、text-center、text-right、text-nowrap；

　　　　6)改变英文的大小写类名：text-lowercase、text-uppercase、text-capticalize；

　　　　7)有点不一样的abbr缩略语：

<abbr title="attrbute">attr</abbr>

 　　　　8)引用blockquote标签，文字前面有个小标识。

　　　 　9）清除列表ul、ol的默认样式添加类名list-unstyled；内联列表添加类名：list-inline。

　　7、表格table

　　　　table，thead、tr、th，tbody、tr、td。thead中的th默认为加粗效果。

　　　　为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线;

　　　　通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

　　　　添加 .table-bordered 类为表格和其中的每个单元格增加边框。

　　　　通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

　　　　通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的上下方向的内补（padding）会减半。

　　　　状态类出现了：

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

　　　　

　　　　响应式表格：将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

　　8、表单

　　　　单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为  100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

　　　　不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。如下：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="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>

 　　　　内联表单：为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

一定要添加 label 标签如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置 .sr-only 类将其隐藏。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

　　　　　label的sr-only类的使用

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" 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>

　　　 水平排列的表单：通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。此时布局要变下，要在form-group外套一个div。同时此时的lable要增加一下类名control-lable以达到理想效果。

<form class="form-horizontal">
  <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>

　　　被支持的控件:包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。　　

　　　　静态控件

　　　　　如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form> 

 　　　  控件大小：

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

　　　　调整高度：

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

　　　　调整宽度：　　　　

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>