bootstrap前端框架的简单基本使用

一、框架的导入及使用方法

导入框架：需要在html代码最前方加上如下代码：

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

同时，为了使用该框架，必须将html代码放在一个class为 **container-fluid** 的div里面

二、图片适配

让图片完美适配页面的宽度，只需加上如下属性： `class=”img-responsive”`

三、控件布局、操作

1、设置文字居中

your text

<h2 class="text-center">your text</h2>

2、按钮基本设置

class中添加btn，就成为了bootstrap的按钮风格

<button class="btn">like</button>

class中加上btn-block就变成了块级按钮  注意，加上btn-block后，原来的btn也不能删了

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

按钮默认颜色也可以有属性直接设置，默认为蓝色

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

类似的，不同按钮颜色还有几种： btn-info，btn-danger等等

3、水平布局

bootstrap当真是把水平布局变得十分简单了，它有一种类似于table的方法，但是使用起来十分方便。

#leftDiv

#rightDiv

上面格式的代码如下

<div class="row">
    <div class="col-xs-6">
        <div class="well">
        #leftDiv
        </div>
    </div>
    <div class="col-xs-6">
        <div class="well">
        #rightDiv
        </div>
    </div>
</div>

将需要水平分片的内容放在一个大div里面，这个div的class必须包含row。
而一个这样的div，将页面水平均匀分成了12份，因此在这个div里面的div，需要几份，就要将div的class加上col-xs-几份。上面是只分成两份，就将其都置为6。而xs意为extra small，意思是指小屏幕如手机，而如果是电脑屏幕则可以使用md，即中等。
再里面可以看到有个<div class="well">，这就是上面所见的阴影，这能给人一种立体感。

4、添加FontIcon

这里添加的是Font Awesome Icons，是一个图标库，使用它需要在代码前加上

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

如下代码就是点赞的图标
<i class="fa fa-thumbs-up"></i>

如果需要换成其他图标，只需需改fa-thumbs-up为其他就行了。

---

以上便是bootstrap的基本使用了，以后再慢慢添加其他新的使用方法。

---

欢迎大家加入QQ群一起交流讨论，「吟游」程序人生——YinyouPoet