Bootstrap基础入门(适合初学者)

缺乏、安全感 2022-05-30 11:16 401阅读 0赞

# Bootstrap基础入门 #

**一、Bootstrap介绍**

1.  什么是bootstrap?

*  简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前端框架之一。
 *  Bootstrap是基于HTML,CSS,Javascript的

2.特点

*  移动端设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式
 *  响应式设计：采用栅格布局（底层实现原理：媒体查询结合流体布局）
 *  偏UI，综合框架，包含一些常用的UI组件以及一些JS组件

3.Bootstrap的适用场景？

*  bootstrap适用于偏展示类的网站或者项目

4.Bootstrap的使用方法？

*   资源网站：bootstrap中文网站：http://www.bootcss.com/
 *  使用方法： ①环境搭建（依赖文件的引入）② 静态结构的满足③功能初始化
 *  注意：bootstrap是基于jquery的！！！

**二、Bootstrap栅格系统**

1.  容器

*  流体布局：container-fluid      (百分百平铺整个页面)
 *  固定布局：container
 *  固定布局根据浏览器不同分辨率，固定尺寸不同，不同阈值对应的宽度如下：

>=1200       width为1170px

>=992         width为970px

>=768         width为750px

<768            为自适应宽度auto

<div class="container-fluid div1">
        流体布局容器
    </div>
    <div class="container div2">
       固定布局容器
    </div>

运行结果：

![2018031115501023][]

2.什么是bootstrap栅格系统？

*  Bootstrap包含了一个响应式的，移动设备优先的，不固定的网格系统，可以随着设备或者视口大小的增加而适当的扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的强大的混合类
 *  表示行的class: row
 *  表示列的class：  注：("\*"可选：1-12之间的任意数字，其它无效)

col-lg-\*:大型设备台式电脑(>=1200)

col-md-\*:中型设备台式电脑(>=992)

col-sm-\*:小型设备平板电脑(>=768)

col-xs-\*:超小设备手机(<768)

*  栅格系统的组合模式：在不同的屏幕下显示不同的排列方式

![20180311160854393][]

*  列偏移

col-\[\*\]-offset-\*

含义：表示在对应的屏幕分辨率下偏移多少个栅格

说明：\[\*\]可选：lg/md/sm/xs

\*可选：1-12之间的任意数字(其它数字无效)

![20180311161303722][]

运行结果：

![20180311161427467][]

注:如果没有设置某阈值对应的网格大小，但是设置了该阈值对应的偏移量，则会通过偏移量自动的帮我们设置该阈值所占网格大小

例如：

![20180311161759461][]

则：默认为col-md-8

*  列排序

col-\[\*\]-push-\*:往后排多少个网格

col-\[\*\]-pull-\*: 往前排多少个网格

说明：\[\*\]可选：lg/md/sm/xs

\*可选：1-12之间的任意数字(其它数字无效)

注：排序和偏移有什么区别？

(1)offset偏移只能向右偏，排序既可以向右也可以向左。

(2)在有多列存在时，如果一行排不下的时候，offset会换行偏移，而排序会在一行显示

offset:

![20180311162736840][]

![20180311162748329][]

push:

![20180311162827318][]

![20180311162837193][]

*  嵌套

规则：嵌套的一行会按照它的父级重新分配网格(即按照其父级宽度进行12个网格平均分配)

![20180311163220488][]

*  清浮动

说明：在需要清除浮动的元素前面添加一个空的div，给div添加类名clearfix

清除浮动前：

![20180311163727606][]

清除浮动后：

![20180311163743662][]

**三、Bootstrap响应式实用工具**

1.  概念：针对不同设备显示或隐藏页面内容
2.  分类：

(1)可见类

①visible-\[\*\]-\*  
                       说明：\[\*\]可选：lg / md / sm /xs 表示在对应的分辨率下显示  
                      \*可选：block / inline / inline-block  
               ②hidden-\[\*\]       
                     说明：\[\*\]可选：lg / md / sm /xs 表示在对应的分辨率下隐藏

![20180311164130446][]

(2)打印类

①visible-print-\*      在打印机可见，在浏览器隐藏  
                    说明： \*可选：block / inline / inline-block  
               ②hidden-print        在浏览器可见，在打印机隐藏

![20180311164324350][]

**四：Bootstrap字体图标(Glyphicons)**

1.  概念：字体图标是在Web项目中使用的图标字体
2.  使用字体图片的优点：①减少网页请求②样式容易控制，可以通过css直接设置样式
3.  原理 ：使用font-face定义        (注：一定要找对文件路径)
4.  用法：

创建一个空标签，给该空标签添加一个基类和对应图标的类

说明：    基类 ( .glyphicon

例如：![20180311165025132][]

注意：  
                    ①图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在

②最好使字体图标和文本内容分开，即使用空标签来做字体图标

今天就更新到这里了，拜拜~~~

[2018031115501023]: /images/20220530/09cacc6c7cb04016892053eca9904255.png
[20180311160854393]: /images/20220530/4abc17ea2b3a4c679f8323d96b58c2ef.png
[20180311161303722]: /images/20220530/168dc1bfde3c45cd950aa7604ef4face.png
[20180311161427467]: /images/20220530/1aa21fa5350b41079baeb7e3ab44756b.png
[20180311161759461]: /images/20220530/b0f66115a153476985cfbb9fab06f354.png
[20180311162736840]: /images/20220530/19a615f295fb4dbca0323350a12941ce.png
[20180311162748329]: /images/20220530/daf45f98386a46cf971f91b43ee3b55a.png
[20180311162827318]: /images/20220530/d8591db93ea14a9abf87ab847bb2383e.png
[20180311162837193]: /images/20220530/f9a03e3052de4891a935a925562cbed3.png
[20180311163220488]: /images/20220530/3e85c80b16954e1a847f559d91edffa8.png
[20180311163727606]: /images/20220530/f53c91c62bcc429e94157b084c45387e.png
[20180311163743662]: /images/20220530/14623343e0ed49d1b3f4f90002e2bdfc.png
[20180311164130446]: /images/20220530/ce95f7c150fd4a699bc85e0878697a16.png
[20180311164324350]: /images/20220530/fa44451d95f64deaaedcbb95fd990dc9.png
[20180311165025132]: /images/20220530/9b25870cede541779873afbb5d5a77ec.png