FCC闯关重温知识点整理（bootstrap篇）

——read  search  ask  log!

目录

 

bootstrap框架

bootstrap的超赞图标库Font Awesome

---

 

bootstrap框架

仅需通过添加下列代码到HTML头部文件哪里即可引用bootstrap框架到你的任意应用中：

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

 

 

引入bootstrap后，直接引用里面写好的类来调样式

1. 图片自适应：<img class="img-redponsive"> 
2. 文本居中 ：<p class="center">
3. button属性：<button class="btn btn-block "> //btn为bootstrap的独有的按钮风格，btn 默认 为行内的元素，所以加上btn-block类属性让其独占一行
4. 常用颜色 ：<button class="btn btn-block btn-primary"> //priamry为深蓝色，颜色可应用于各种元素，如：text-priamry,                           <button class="btn btn-block btn-info">      //info为浅蓝色                                                                                                         <button class="btn btn-block btn-danger"> //danger为红色
5. 常用well类 ：Bootstrap 有一个 class 属性叫做 well，它的作用是为设定的列创造出一种视觉上的深度感（一种视觉上的效果，动手写代码体会一下）效果如下：

 

bootstrap栅栏式布局

Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求class属性 col-md-* 来调节布局。在这里，col 是列；md 表示 medium (中等的)，可取值为、lg、md、xs；* 代表一个数字，它指定了这个元素所占的列宽，（我理解为即占多少个单元格）。

col-xs-* 超小屏幕 手机 (<768px)

.col-sm-* 小屏幕 平板 (≥768px)

.col-md-* 中等屏幕 桌面显示器 (≥992px)

.col-lg-* 大屏幕 大桌面显示器 (≥1200px)

 

.row与.col-xs-* 搭配使用，.row类作为.col-xs-*类的父元素的类存在；  xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕），* 是你需要填写的数字，代表在一行中,各个元素应该占的列宽，即占自动每行row分12列栅格系统比；（我理解为即所占多少单元格）

      .col-xs-*超小屏幕 手机 (<768px)，超小屏幕时使用；

     .col-sm-*小屏幕 平板 (≥768px)，小屏幕时使用；

     .col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数)，中等屏幕时使用；

     .col-lg-*大屏幕 大桌面显示器 (≥1200px)，大屏幕时使用。

eg: 

<form class="row" method="get" action="url">

    <button class=" btn btn-primary col-xs-5"> thumb </button>

    <button class="btn btn-info col-xs-5"> love </button>

    <button class="btn btn-danger col-xs-5"> hate </button>

</form>

 

bootstrap的超赞图标库Font Awesome

Font Awesome 是一个bootstrap非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。可以将 Font Awesome 图标库增添至任何一个应用中，方法很简单，只需要在你的 HTML 头部增加下列代码即可：

<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

 

引入Font Awesome后直接调用写好的类来添加图标

<i class="fa fa-thumbs-up" ></i> //在bootstrap中i标签用来表示图标 ，调用Font Awesone里面写好的类.fa .fa-图标代表指定的类名;

 

常用图标：fa-thumbs-up(点赞图标)、fa-info-circle（信息图标）、fa-thumbs-trash（删除图标）、fa-paper-plan(纸飞机图标，应用场景：提交按钮)