【分享】bootstrap学习笔记

时间:2021-07-26 18:08:28

一、基础知识

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