BootStrap入门

BootStrap：

一，概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。

      框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。

               好处：

                      1. 定义了许多的css样式和js插件

                      2.响应式布局：

                                 同一套页面可以兼容不同分辨率的设备

二，快速入门

       1.下载BootStrap

       2.引入项目所需要的资源

 

响应式布局：

         概念：  同一套设备可以兼容不同分辨率的设备。

         实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

                  步骤：

                          1.定义容器

                                        容器分类：

                                                    1.container：两边留白

                                                    2.container-fluid：每一种设备都是100%宽度

                         2.定义行。相当于之前的tr   样式：row

                         3.定义元素。指定该元素在不同的设备上和所占的格子数目    样式：col-设备代号-格子数目

                                     设备代号：

                                              1.  xs  超小屏幕   手机  （<768px）：col-xs-12

                                              2.  sm  小屏幕     平板  （>=768px）

                                              3.md  中等屏幕   桌面显示器  （>=992px）

                                              4.lg  大屏幕    大桌面显示器    （>=1200px）

                注意：
                          1. 一行中如果格子数目超过12，则超出部分自动换行。

                          2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。

                         3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

 

css样式和js插件

       1.全局css样式：

              按钮：class="btn btn-default"

              图片： class="img-responsive"：图片在任意尺寸都占100%

                      图片形状：

                            <img src="..." alt="..." class="img-rounded">：方形

                            <img src="..." alt="..." class="img-circle"> ： 圆形

                            <img src="..." alt="..." class="img-thumbnail"> ：相框

           表格：

                  table

                 table-bordered

                 table-hover

        2.组件：

                导航条

                分页条

       3.插件

              轮播图