Bootstrap

FreeCodeCamp
,

Bootstrap严格来说不是一个前端框架，它是一个组件库，相当于在这个框架内它提前设定好了各个类该如何呈现，我们在做WEB开发的时候，引用bootstrap之后直接将这些类名套用到元素上，就能快速地对元素修改样式。

Bootstrap的确非常方便，上手很快：

  • 它需要我们自己去定义的东西很少，我们只用搭积木似的把元素往页面上安装就可以了，一个类名就对应了一组样式
  • 它是用于响应式布局、移动设备优先的框架，能够帮我们快速搞定大屏幕和小屏幕的布局
  • 它的兼容性比较好

因为这样一些原因，当我们遇到需要快速搭建网站，或者是人手比较少，需要一个人完成整个网站开发的时候，都可以考虑使用Bootstrap。而且使用Bootstrap也不需要我们提前去记忆很多内容，我们只要对照需要的样式去复制对应的代码就可以了。

但是Bootstrap也不是没有缺陷。Bootstrap本身的体积有点偏大，有3+MB，对于网站的打开速度有一些影响。而且它打包了整个库，也就是说，即使我们只适应了其中几个button的样式，我们也需要引入整个库，这样会造成资源的浪费。

之前听一个腾讯的老师讲课说道，国内使用Bootstrap的大公司比较少，大公司更偏向与使用原生技术，如果是自己开发一些小的项目，可以用一用。类似的还有国内的Amaze UI。

FCC课程的bootstrap内容集中在CSS样式上。内容包括：

  • 引入bootstrap

    1
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

  • 样式

    • 图片 <img class="img-resonsive" src="#"> (100%width)
    • 文本
      • 样式居中 class="text-center">
      • 文本颜色 class="text-danger" （颜色参考按钮）
    • 按钮 class="btn"
      • 默认样式 class="btn btn-default"
      • 块级样式 class="btn btn-block"
      • 蓝色按钮 class="btn btn-primary"
      • 淡蓝色按钮 class="btn btn-info"
      • 红色按钮 class="btn btn-danger"
    • 图标 <i class="fa"></i>
      • 点赞图标 <i class="fa fa-thumbs-up"></i>
      • 垃圾桶图标 <i class="fa fa-info-trash"></i>
      • 信息图标 <i class="fa fa-info-circle"></i>
    • 凹陷 <div class="well">

  • 结构

    • 总体 <div class="container-fluid">
    • 行 <div class="row">
    • 元素 （Bootstrap使用的是12-column grid system，也就是把设备宽度平均分成12列，元素宽度按单位列宽计算）
      • 大屏设备，如笔记本、台式机 class="col-md-4"
      • 小屏设备，如手机 class="col-xs-4"

以下是习题解答： ___

Introduction to the Bootstrap Challenges

  • Use Responsive Design with Bootstrap Fluid Containers

    1
    2
    3
    4
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
    <div class = "container-fluid" >
      ...
    </div>

  • Make Images Mobile Responsive

    1
    <img class = "img-responsive" src = "https://bit.ly/fcc-running-cats">

  • Center Text with Bootstrap

    1
    <h2 class="red-text text-center">CatPhotoApp</h2>

  • Create a Bootstrap Button

    1
    <button class ="btn btn-default">Like</button>

  • Create a Block Element Bootstrap Button

    1
    <button class="btn btn-default btn-block">Like</button>

  • Taste the Bootstrap Button Color Rainbow

    1
    <button class="btn btn-primary btn-block">Like</button>

  • Call out Optional Actions with btn-info

    1
    <button class="btn btn-block btn-info">Info</button>

  • Warn Your Users of a Dangerous Action with btn-danger

    1
    <button class="btn btn-block btn-danger">Delete</button>

  • Use the Bootstrap Grid to Put Elements Side By Side

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <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>

  • Ditch Custom CSS for Bootstrap

    1
    2
    3
    <h2 class="text-primary text-center">CatPhotoApp</h2>
      
    <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  • Use a span to Target Inline Elements

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

  • Create a Custom Heading

    1
    2
    3
    4
    5
    6
    7
    8
    <div class = "row">
      <div class="col-xs-8">
        <h2 class="text-primary text-center">CatPhotoApp</h2>
      </div>
      <div class="col-xs-4">
        <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
      </div>
    </div>

  • Add Font Awesome Icons to our Buttons

    1
    2
    3
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">

    <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i>Like</button>

  • Add Font Awesome Icons to all of our Buttons

    1
    2
    3
    4
    5
    6
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i>Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i>Delete</button>
    </div>

  • Responsively Style Radio Buttons

    1
    2
    3
    4
    5
    6
    7
    8
    <div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>
    </div>

  • Responsively Style Checkboxes

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="row">
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Loving</label>
      </div>
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Lazy</label>
      </div>
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Crazy</label>
      </div>
    </div>

  • Style Text Inputs as Form Controls

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

  • Line up Form Elements Responsively with Bootstrap

    1
    2
    3
    4
    5
    6
    7
    8
    <div class="row">
      <div class="col-xs-7">
        <input type="text" class="form-control" placeholder="cat photo URL" required>
      </div>
      <div class="col-xs-5">
        <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
      </div>
    </div>

  • Create a Bootstrap Headline

    1
    <h3 class="text-primary text-center">jQuery Playground</h3>

  • House our page within a Bootstrap container-fluid div

    1
    2
    3
    <div class="container-fluid">
        <h3 class="text-primary text-center">jQuery Playground</h3>
    </div>

  • Create a Bootstrap Row

    1
    2
    3
    4
    <div class="container-fluid">
      <h3 class="text-primary text-center">jQuery Playground</h3>
    	<div class="row"></div>
    </div>

  • Split Your Bootstrap Row

    1
    2
    3
    4
    5
    6
    7
    <div class="container-fluid">
      <h3 class="text-primary text-center">jQuery Playground</h3>
      <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
      </div>
    </div>

  • Create Bootstrap Wells

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="container-fluid">
      <h3 class="text-primary text-center">jQuery Playground</h3>
      <div class="row">
        <div class="col-xs-6">
          <div class="well"></div>
        </div>
        <div class="col-xs-6">
          <div class="well"></div>
        </div>
      </div>
    </div>

  • Add Elements within Your Bootstrap Wells

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <div class="container-fluid">
      <h3 class="text-primary text-center">jQuery Playground</h3>
      <div class="row">
        <div class="col-xs-6">
          <div class="well">
            <button></button>
            <button></button>
            <button></button>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="well">
            <button></button>
            <button></button>
            <button></button>
          </div>
        </div>
      </div>
    </div>

  • Apply the Default Bootstrap Button Style

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div class="row">
      <div class="col-xs-6">
        <div class="well">
          <button class="btn btn-default"></button>
          <button class="btn btn-default"></button>
          <button class="btn btn-default"></button>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="well">
          <button class="btn btn-default"></button>
          <button class="btn btn-default"></button>
          <button class="btn btn-default"></button>
        </div>
      </div>
    </div>

  • Create a Class to Target with jQuery Selectors

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div class="row">    
    	<div class="col-xs-6">
        <div class="well">
          <button class="btn btn-default target"></button>
          <button class="btn btn-default target"></button>
          <button class="btn btn-default target"></button>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="well">
          <button class="btn btn-default target"></button>
          <button class="btn btn-default target"></button>
          <button class="btn btn-default target"></button>
        </div>
      </div>
    </div>

  • Add id Attributes to Bootstrap Elements

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div class="row">
      <div class="col-xs-6">
        <div class="well" id="left-well">
          <button class="btn btn-default target"></button>
          <button class="btn btn-default target"></button>
          <button class="btn btn-default target"></button>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="well" id="right-well">
          <button class="btn btn-default target"></button>
          <button class="btn btn-default target"></button>
          <button class="btn btn-default target"></button>
        </div>
      </div>
    </div>

  • Label Bootstrap Wells

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div class="row">
      <div class="col-xs-6">
        <h4>#left-well</h4>
        <div class="well" id="left-well">
          <button class="btn btn-default target"></button>
          <button class="btn btn-default target"></button>
          <button class="btn btn-default target"></button>
        </div>
      </div>
      <div class="col-xs-6">
        <h4>#right-well</h4>
        <div class="well" id="right-well">
          <button class="btn btn-default target"></button>
          <button class="btn btn-default target"></button>
          <button class="btn btn-default target"></button>
        </div>
      </div>
    </div>

  • Give Each Element a Unique id

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div class="row">
      <div class="col-xs-6">
        <h4>#left-well</h4>
        <div class="well" id="left-well">
          <button class="btn btn-default target" id="target1"></button>
          <button class="btn btn-default target" id="target2"></button>
          <button class="btn btn-default target" id="target3"></button>
        </div>
      </div>
      <div class="col-xs-6">
        <h4>#right-well</h4>
        <div class="well" id="right-well">
          <button class="btn btn-default target" id="target4"></button>
          <button class="btn btn-default target" id="target5"></button>
          <button class="btn btn-default target" id="target6"></button>
        </div>
      </div>
    </div>

  • Label Bootstrap Buttons

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div class="row">
      <div class="col-xs-6">
        <h4>#left-well</h4>
        <div class="well" id="left-well">
          <button class="btn btn-default target" id="target1">#target1</button>
          <button class="btn btn-default target" id="target2">#target2</button>
          <button class="btn btn-default target" id="target3">#target3</button>
        </div>
      </div>
      <div class="col-xs-6">
        <h4>#right-well</h4>
        <div class="well" id="right-well">
          <button class="btn btn-default target" id="target4">#target4</button>
          <button class="btn btn-default target" id="target5">#target5</button>
          <button class="btn btn-default target" id="target6">#target6</button>
        </div>
      </div>
    </div>

  • Use Comments to Clarify Code

    1
    <!-- Only change code above this line -->