作为移动端(Android)开发的我已被前端框架Bootstrap所折服

一，Bootstrap介绍：
一年前的我还沉浸在移动端各种适配和优化中不能自拔，为了适配市场的各种分辨率，我拿着谷歌百分比布局，也有生成各中分辨率下的尺寸文件，或通过测量屏幕宽高来定义同比例缩放的包裹控件等达到适配效果。当我路过Web前端搞了css+html+javascript+jquery之后同样也会遇到适配问题，了解了一些前端框架，今天晚上看到了Bootstrap这个框架，Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。相信自己你可以半小时搞定它，让你前端达到中级水平。
二，Bootstrap的好处
如果你学完过Html+css我相信对于很多美丽漂亮的弹窗，按钮，导航栏，标签，轮播图，…..等等。最主要的是适配各种分辨率的屏幕，甚至是手机哦，而Bootstrap这个框架让你轻松达到响应式页面适配各种屏幕，以及轻松达到美丽漂亮的页面布局。

三，先来看看Bootstrap所构建的小例子组件和框架图片如下：
这里写图片描述

自己写的案例网页：
这里写图片描述
.
.
. 等等

四，如何搭建Bootstrap架构

第一步:

 去bootstrap官网下载Bootstrap源码和库。http://www.bootcss.com/

第二步:
```
导入bootstarp.css
```
第三步：
```
导入jquery.js
```
第四步：
```
导入bootstrap.js
```

第五步：

 添加一个meta标签 支持移动设备
<meta name="viewport" content="width=device-width, initial-scale=1">

第六步.

将所有的内容放入到布局容器中.
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处类

第七步：

主要是对于系统栅格化理解了。其他都是回调类。

就这么简单如下案例快速搭建一个Bootstrap的环境：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--导入css-->
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
        <!--导入jquery.js-->
        <script type="text/javascript" src="../js/jquery-1.11.0.js"> </script>
        <!--导入bootstrap.js-->
        <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    </head>
    <body>
        <div style="border: 1px solid firebrick;">原始方式</div>
        <div class="container">
            <div style="border: 1px solid firebrick;">container:方式一</div>
        </div>

        <div class="container-fluid">
            <div style="border: 1px solid firebrick;">container-fluid方式二</div>
        </div>
    </body>
</html>

五，简单的粘贴复制完成自己的页面：
说实话，这是我见过最好用的框架了，因为文档提供的太给力了，并且使用也是类的形式，极其容易理解，让我们打开http://www.runoob.com/bootstrap/bootstrap-jumbotron.html。然后我们会发现这分类极其详细一目了然。使用起来都是案例源码直接粘贴复制。代码很好理解，只要你学过了Html+css+js+jquery，请粘贴复制稍微修改下样式，美丽漂亮高大上的东西就出来了哦。
这里写图片描述

作为移动端(Android)开发的我已被前端框架Bootstrap所折服

猜你喜欢