12.20bootstap 基础

响应式布局

body{  //样式
        background:#444;
    }
@media screen and (max-width:500px){    //当屏幕小于500时，的css样式
    body{  //样式
        background:#fff;
    }
}

手机视口

使手机端可以正常显示，不被压缩
<meta name="viewport" content="width=device-width,initial-scale=1">

字体图标库 fontawesome.io 导入css文件即可用

bootstap 网站：http://v3.bootcss.com

table
加类名：table 自动设置表格样式
table-bordered 边框
table-hover 移入事件
table-condensed 紧凑
tr td 颜色：
加类名：
success
active
warning
info
danger

表单
实现基本的表单样式

<form>//内联表单:<form class="form-inline">
    <div class="form-group">//has-error 错误状态,has-success 成功状态,has-warning 警告状态
        <label>电子邮件</label>
        <input type="email" class="form-control"
        placeholder="请输入您的电子邮件">
    </div>
    <div class="form-group">
        <label>密码</label>
        <input type="password" class="form-control"
        placeholder="请输入您的密码">
    </div>
</form> 

让表单内的元素保持水平排列

<form class="form-horizontal"> //保持水平
    <div class="form-group">
        <label class="col-sm-2 control-label">电子邮件</label>
        <div class="col-sm-10"> //需要加div在外层
            <input type="email" class="form-control" placeholder="请输
        入您的电子邮件">
        </div>
    </div>
</form> 

单选框、复选框

    <div class="checkbox">
      <label>
        <input type="checkbox" value="">
           Option one is this and that—be sure to include why it's great
      </label>
    </div>
//禁用
    <div class="checkbox disabled">
      <label>
        <input type="checkbox" value="" disabled>
        Option two is disabled
      </label>
    </div>

//设置内联一行显示的复选框

<label class="checkbox-inline">
    <input type="checkbox">体育
</label>
<label class="checkbox-inline disabled">
    <input type="checkbox" disabled>音乐
</label>

设置下拉列表

<select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

文本框右侧内置文本图标

<div class="form-group has-feedback">
    <label>电子邮件</label>
    <input type="email" class="form-control">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

** 栅栏布局 **

<div class="container"> //container-fluid全屏显示
      <div class="row">
      <!--  md:middle  lg:large sm:small  适应不同大小的屏，
         col-md-offset-3  向右边偏移 3份  会影响后面的位置(margin-left)
         col-md-push-3    向右边移动 3份  不会影响后面的位置(relative) 
         col-md-pull-3    向左边移动 3份  不会影响后面的位置(relative)
      --> 
        <div class="col col-md-4 col-lg-3 col-sm-6 col-xs-12  a">
          <div class="row">
            <div class="col col-md-4 a"></div>
            <div class="col col-md-4 a"></div>
            <div class="col col-md-4 a"></div>
          </div>
        </div>
        <div class="col col-md-4 col-lg-3 col-sm-6 col-xs-12 col-md-push-2 a"></div>
        <div class="col col-md-4 col-lg-3 col-sm-6 col-xs-12 a"></div>
        <div class="col col-md-4 col-lg-3 col-sm-6 col-xs-12 a"></div>
      </div>
  </div>

图片

    ![](1.jpg)  <!-- 圆角 -->
    ![](1.jpg) <!-- 圆形 -->
    ![](1.jpg) <!-- 缩略图 -->
    <!-- 当图片大于父元素的宽度时,图片会缩小到父元素的宽度 -->
    ![](1.jpg)

按钮
按钮分组

  <div class="btn-group dropup"><!-- 加三角号  dropup向上 /btn-group-lg, sm, xm 指定大小 -->
    <button class="btn btn-info active"> <!-- 给btn加active 选中状态 ，btn-info  可改变颜色-->
      <span class="glyphicon glyphicon-star"></span> <!-- 加字体符号 -->
      按钮 
    </button>   
    <button class="btn btn-primary"><span class="caret"></span></button>
  </div>

<a href="###" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input">

预定义样式

• 样式 说明
  btn-default 默认样式
  btn-success 成功样式
  btn-info 一般信息样式
  btn-warning 警告样式
  btn-danger 危险样式
  btn-primary 首选项样式
  btn-link 链接样式

从大到小的尺寸

lg large
sm small
xs x-small
<button class="btn btn-lg">Button</button>
<button class="btn">Button</button>
<button class="btn btn-sm">Button</button>
<button class="btn btn-xs">Button</button>

//块级换行

<button class="btn btn-block">Button</button>
<button class="btn btn-block">Button</button>

列表
//移出默认样式

<ul class="list-unstyled">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul>

//设置成内联

<ul class="list-inline">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul>

//设置英文文本大小写

<p class="text-lowercase">Bootstrap 框架</p> <!--小写-->
<p class="text-uppercase">Bootstrap 框架</p> <!--大写-->
<p class="text-capitalize">bootstrap 框架</p><!--首字母大写-->

//缩略语

Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>