【基础知识】Bootstrap前端开发框架

目的：组件、样式直接拿来用，不需要自己写复杂的。

中文官网：https://getbootstrap.net/

官网：https://www.bootcss.com/

Bootstrap前端开发框架：顾名思义就是一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者按照框架所规定的某种规范进行开发。

版本：2.x.x：目前已停止维护。

3.x.x：目前使用最多，偏向于开发响应式布局（简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本）。移动设备优先的WEB项目。

4.x.x：最新版，还不太稳定。

Bootstrap创建页面

1、目录结构（js、img、css）

2、下载Bootstrap（用于生产环境的）：https://v3.bootcss.com/getting-started/#download

3、创建页面，在链接下方有模板。https://v3.bootcss.com/getting-started/#download

4、模板页面依据需要引入Bootstrap离线的bootstrap.min.css和jquery.js、bootstrap.min.js

Bootstrap书写页面

1、直接拿Bootstrap预定义好的样式使用。

2、可以利用我们自己写的样式，覆盖修改原来的样式，注意权重问题。

3、学好Bootstrap关键在于知道它定义了那些样式，以及这些样式能实现什么样的效果。

Bootstrap中全局css样式，https://v3.bootcss.com/css/#grid

1、布局容器

Bootstrap需要为页面和栅格系统包裹一个.container容器，是预定义类。

.container响应式布局，固定宽度。

.container-fluid流式布局，百分之百宽度。

2、栅格系统（网格系统，grid system）将container页面自动分为最多12列。

不同设备宽度：类前缀：.col-xs-（extra small超小）.col-sm-（small小）.col-md-（medium 中等）.col-lg-（large 大）

  <div class="container">

    <div class="row">

      <div class="col-lg-3">1</div>

      <div class="col-lg-3">2</div>

      <div class="col-lg-3">3</div>

      <div class="col-lg-3">4</div>

    </div>

  </div>

如果不满12份，则会有空白。如果大于12份，则另起一行。

每列默认左右有15像素的padding，可css修改掉。

可以为同一列指定多个设备类名，让其在不同宽度划分。例如：class="col-md-4 col-sm-6"。

列可以嵌套子.container，可以在列中再次划分12列，套娃效果。

3、列偏移

如果需要让两个div左右贴变排列，则可以使用.col-md-offset-*类可以将列向右偏移。使用margin也可以达到效果，但margin不是响应式的。

4、列排序

改变原有列的顺序，通过.col-md-push-*和.col-md-pull-*来实现。

5、响应式工具

有些页面改变宽度时，隐藏其中一些次要内容列。.hidden-xs超小屏幕隐藏，.hidden-sm小屏幕隐藏，.hidden-md中屏幕隐藏，.hidden-lg超小屏幕隐藏。

与之相反.visible-是显示某个页面内容。

其它的css样式参考官网https://v3.bootcss.com/css/#grid

 

参考：https://v3.bootcss.com/css/#grid

https://www.bilibili.com/video/BV14J4114768?p=503