Bootstrap

发表于 2018-07-12 更新于 2018-08-07 分类于 FreeCodeCamp 阅读次数： Disqus：

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

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

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

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

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

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

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

引入bootstrap

<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

<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

<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

<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

<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

<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

<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

<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

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

Split Your Bootstrap Row

<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

<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

<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

<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

<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

<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

<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

<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

<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 -->