关于bootstrap简单记录

bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。   

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

那么，页面中可写为： 

<link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
            <!--[if lt IE 9]>
        
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        
    <![endif]-->

若要使用bootstrap的JS插件，必须先引入jQuery，在根据需要引入bootstrap.js
1.标题与副标题
    <h1>主标题<small>副标题</small></h1>
2.特意突出的文本
    <p class="lead">特意突出的文本</p>
    注意：
        <small>  <strong><b>  <em><i><cite>
3.颜色类
    .text-muted：提示，使用浅灰色（#999）
    .text-primary：主要，使用蓝色（#428bca）
    .text-success：成功，使用浅绿色(#3c763d)
    .text-info：通知信息，使用浅蓝色（#31708f）
    .text-warning：警告，使用黄色（#8a6d3b）
    .text-danger：危险，使用褐色（#a94442）
4.对齐类
    .text-left：左对齐
    .text-center：居中对齐
    .text-right：右对齐
    .text-justify：两端对齐（各个浏览器表现不一样 慎用）
5.列表类
    .list-unstyled:不带项目符号，且左边距为：0
    <ul class="list-unstyled">
        
        <li>不带项目符号</li>
        
        <li>不带项目符号</li>
        
    </ul>
    .list-inline:把垂直列表换成水平列表，去掉项目符号，保持水平展示
    .dl-horizontal：定义列表水平显示（当屏幕大于768才有作用，标题大于180px时会以...显示）
6.代码类
    .pre-scrollable:针对于<pre>,当高度太大时，自动产生滚动条
7.表格类
    .table：基础表格
    .table-striped：斑马线表格
    .table-bordered：带边框的表格
    .table-hover：鼠标悬停高亮的表格
     .table-condensed：紧凑型表格
    .table-responsive：响应式表格
8.表单类
    .form-horizontal:在<form>上使用
    .form-inline:内联
    .form-control:用在表单控件上，如<input>.保证控件在各种表单风格中样式不会错
    .checkbox:多选框   

<div class="checkbox">
    
            <label>
      
                <input type="checkbox" value="">
      
                记住密码
   
            </label>
 
        </div>

 .radio:单选框

<div class="radio">
    
            <label>
      
                <input type="radio" value="">
      
                是   
            </label>
 
        </div>

.checkbox-inline/.radio-inline:水平排列

<div class="form-group">
    
        <label class="radio-inline">
      
            <input type="radio"  value="option1" name="sex">
            男性

        </label>
    
        <label class="radio-inline">
      
            <input type="radio"  value="option2" name="sex">
            女性
    
        </label>
    
        <label class="radio-inline">
      
            <input type="radio"  value="option3" name="sex">
            中性
    
        </label>
 
    </div>

    .input-sm:让控件比正常大小更小
    .input-lg:让控件比正常大小更大
    .has-warning:警告状态（黄色）
    .has-error：错误状态（红色）
    .has-success：成功状态（绿色）
    .has-feedback:验证反馈图标
    

<div class="form-group has-success has-feedback">
    
        <label class="control-label" for="inputSuccess1">
            成功状态
        </label>
    
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  
    </div>

    .help-block:表单验证提示信息
    

<div class="form-group has-success has-feedback">
          <label class="control-label" for="inputSuccess1">成功状态</label>
          <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
          <span class="help-block">你输入的信息是正确的</span>
          <span class="glyphiconglyphicon-ok form-control-feedback"></span>
    </div>

9.按钮类
    .btn:基本按钮
    .btn-link:链接按钮
    .btn-default:默认按钮
    .btn-primary:主要按钮
    .btn-success:成功按钮
    .btn-info:信息按钮
    .btn-warning:警告按钮
    .btn-danger:危险按钮
    .btn-lg:大型按钮
    .btn-sm:小型按钮
    .btn-xs:超小型按钮
    .btn-block:块状按钮
10.图像类
    .img-responsive：响应式图片，主要针对于响应式设计
    .img-rounded：圆角图片
    .img-circle：圆形图片
    .img-thumbnail：缩略图片
    .thumbnail：在img父级上使用，配合网格
11.网格类
    .col-xs-(1~12)
    .col-sm-(1~12)
    .col-md-(1~12)
    .col-lg-(1~12)
    .col-md-offset-*:列向右偏移
12.导航相关
    .nav .nav-tabs:tab形
    .nav .nav-pills:胶囊形
    .nav-stacked:垂直显示
    .nav-justified:宽度自适应
    .navbar-fixed-top:导航栏固定在顶部
    .navbar-fixed-bottom:导航栏固定在底部
13.模态框相关
    .modal-lg:大尺寸模态框
    .modal-sm:小尺寸模态框