分享bootstrap学习笔记

Posted 2020-08-04 芝麻的西瓜

一、基础知识

1.整体架构

以响应式设计为理念，css组件、js插件+jquery、基础布局组件和12栅格系统搭建。

1.1响应式设计：结合media query查询，适应更多设备，自动适应用户的设备环境，不必为每个终端做一个特定的版本。

2.css12栅格系统

将容器平分12份，行（row）必须包含在.container中，只有列（column）可作为行的直接子元素。ps：如果要充满屏幕100%显示，那就不能用container样式了，因为该样式针对4种不同的屏幕大小固定了尺寸，可自己定义一个样式，注意修复container的-15px的外边距。

3.基本用法

3.1列组合：使用数字来合并，有点类似colspan，col-md-4，其中col指的是列，md指的是中型屏幕，4指的是12列中占4列的宽度，实现方式为左浮动加宽度百分比

3.2列偏移：使用offset来定义，具体样式如：.col-md-offset-*，实现原理是利用1/12的margin-left

3.3列排序：通过push（推）和pull（拉）来改变左右浮动，以左为基准

4.响应式栅格

4.1跨设备组合定义：md-中屏，超小-xs，小型-sm，大屏-lg。向大兼容，不支持向小兼容。

4.2清除浮动：在定义支持多个设备的样式时，比如：col-xs-6 col-sm-3，在超小屏有可能会发生错位，需要用clearfix来清除，比如：<div class="clearfix visible-xs"></div>，visible-xs是指当能够在超小屏幕上显示

5.css组件

原理：附加和覆盖的原则，后边的样式覆盖掉前面的样式

5.1颜色样式：默认为很多组件提供了5种颜色，分别是primary（重点蓝）、success（成功绿）、info（信息蓝）、warning（警告橙）、danger（危险红）

5.2尺寸样式：一般组件都有4种尺寸：超小（xs）、小型（sm）、普通（default也可以不写，默认）、大型（lg）。

同一个组件的不同类型的样式可以组合到一起使用，比如颜色样式btn-success和尺寸样式btn-lg，示例：btn btn-success btn-lg