FreeCodeCamp总结——Bootstrap框架

Bootstrap-响应式框架-美化页面

优势：Bootstrap会自动根据屏幕大小调整HTML元素的大小（响应式设计）无需再弄原生态手机版APP

如何添加Bootstrap：

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

如何使用：

1.首先，需要把所有HTML的内容放在class为container-fluid的div下

2.将想要的公民

具体使用：

1.图片自适应：class=img-responsive 图片的宽度就可以完美适配页面的宽度。

<img class="img-responsive" src="/imagesrunning-cat.jpg">

2.按钮： <button class="btn">Like</button>

块级元素：通常button和它所包含的文本一样宽，成为块级元素就会填满整个水平空间，任何在它之下的元素都会浮动到下一行

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

深蓝色按钮：class="btn-primary"因为是应用的主要颜色，用在主要采取的操作上。

浅蓝色按钮：class="btn-info"用在用户可能采取的操作上。

红色按钮：class="btn-danger"用在提醒用户该操作具有"破坏性"，例如删除操作。

3.网格布局：

由Bootstrap使用响应式网格布局，可以轻松实现将多个元素放入一排，然后指定各个元素的宽度。

Bootstrap中大多数class属性都可以放于div中

md表示medium中等，*代表一个数字，指定元素所占列宽，md用于中等大小的屏幕上（比如笔记本电脑）

xs即extra small，应用于手机等较小的屏幕，*为需要填的数字

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

4.span元素：用这个可以把几个元素放在一起，也可以为一个元素的不同部分设置不同样式

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

5.Font Awesome：一个方便的图标库，是矢量图形，保存为.svg文件格式中，和字体一样，可通过像素单位指定它们的大小，会继承父HTML元素的字体大小。

添加方法：<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

i本来一般是斜体功能，现在一般用来指代图标，将Font Awesome中的class属性添加到i元素中，把它变成一个图标，比如：

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

6.form中使用col-xs-* 这样单选按钮就可以均匀分布，不用管屏幕分辨率。

将页面中两个单选按钮放置于一个<div class="row">元素中，然后添加<div class="col-xs-6">元素并包裹每一个单选按钮。

7.搭建JQuery playground

h3元素设置属性：text-primary text-center

Bootstrap有一个class属性叫well，为设定的列创造出一种视觉上的深度感

并不是每个元素都是用于css的，有时候我们创建一些class只是为了方便的在jQuery中选中这些元素。

FreeCodeCamp总结——Bootstrap框架

猜你喜欢