#Bootstrap框架

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">添加在html开头
然后把所有的HTML内容放在class为container-fluid的div下

  • img-responsive 图片大小
  • well 视觉上的深度感
  • text-xxxx(red/pink…) 文字颜色
  • text-center 文字格式
  • btn 按钮
  • btn btn-block 使按钮成为行级元素
  • btn-primary 深蓝色按钮属性
  • btn-info 浅蓝色按钮属性

  • btn-danger 红色按钮属性

    例1:在图片下方形成和图片等宽的蓝底白字按钮

    1
    2
    <img src="/images/running-cat.jpg" class="img-responsive">
      <button class="btn btn-block btn-primary ">Like</button>

    例2:让文字love颜色变红

    1
    <p>Things cats <span class="text-danger">love</span>:</p>

  • col-xs/md-x 将多个元素放入一行并指定各个元素的相对宽度
    例3:将三个按钮放在同一行并设置相对宽度为4

    1
    2
    3
    4
    5
    <div class="row">
     <div class="col-xs-4"> <button class="btn btn-block btn-primary">Like</button></div>
      <div class="col-xs-4"><button class="btn btn-block btn-info">Info</button></div>
      <div class="col-xs-4"><button class="btn btn-block btn-danger">Delete</button></div>
      </div>

#图标库

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>添加在html开头

  • fa fa-thumbs-up 点赞图标
  • a fa-info-circle 提示图标
  • fa fa-trash 删除图标

  • fa fa-paper-plane 提交图标
    例1:将 Font Awesome 中的 class 属性添加到 i 元素中，把它变成一个图标

    1
    <i class="fa fa-info-circle"></i>

    例2: button 提交按钮上添加 Font Awesome的 fa-paper-plane 图标

    1
    2
    <input class="form-control" type="text" placeholder="cat photo URL" required>
    <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button>

#小结

使元素在一行
<div class="row"></div>
设置元素的指定宽度
<div class="row"><div class="col-xs-6"></div></div>
设置文本框
<div class="row"><div class="col-xs-6"> <input type="text" class="form-control"></div></div>
设置提交按钮
<button type="submit" class="btn btn-primary"> Submit</button>
设置提交按钮图标
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
确保页面里所有的内容都是响应式的
<div class='container-fluid'><h3 class="text-primary text-center">jQuery Playground</h3></div>
为了更方便地在jQuery中选中这些元素
<button class="btn btn-default target "></button>or
<button class="btn btn-default target" id="target1/2/3/4/5/6"></button>