Bootstrap学习笔记
一、引入 bootstrap
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body></body>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>可在官网的文档中引入基本模板，然后开始使用 bootstrap
二、基础
bootstrap 首先将 box-sizing 设置为 border-box
在 bootstrap 中为了增强跨浏览器表现的一致性，使用 Normalize.css （可在 GitHub 上搜到）重置样式，也可使用cssreset上的重置样式库
1、容器
容器两侧都有 15px 的 padding
（1）流体容器
container-fluid 流体容器，相当于一个弹性盒，width 为 auto
（2）固定容器
固定容器 container 分为三个阈值 768、992、1200，在 xs、sm、md、lg 都具备时
视口大小 < 768 时，（xs 移动手机），width = auto，此时相当于流体容器
768 < 视口大小 < 992 时，（sm 平板），width = 750 = 720 + 槽宽30
992 < 视口大小 < 1200 时，（md 中屏pc），width = 970 = 940 + 槽宽30
视口大小 >= 1200 时，（lg 大屏pc），width = 1170 = 1140 + 槽宽30
严格上说，sm 表示视口大小 >= 768，md 表示视口大小 >= 992，lg 表示视口大小 >= 1200，代码执行时移动（小屏）优先，大屏下的样式写在小屏后会覆盖小屏的样式
若只有 sm，则表示视口大小 >= 768
2、栅格系统
栅格系统由固定容器、行、列组成，默认每行由 12 列组成
栅格是基于浮动的，本质上用的是 float
在栅格中通过 col-lg-pull-x 表示 left，col-lg-push-x 表示 right，col-lg-offset-x 表示 margin-left，其中 x 表示 0-12 的整数，md、sm、xs 同理
<div class="container">
<div class="row">
<div class="col-lg-10"></div>
<div class="col-lg-2"></div>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8"></div>
</div>
</div>栅格系统源码
源码可在 bootstrap官网下载
//固定容器
.container{
container-fixed();
...
}
//流体容器
.container-fluid{
container-fixed();
}
//行
.row{
.make-row();
}
//列
.make-grid-columns();
.make-grid(xs); //移动优先
@media(min-width:@screen-sm-min){
.make-grid(sm);
}
@media(min-width:@screen-md-min){
.make-grid(md);
}
@media(min-width:@screen-lg-min){
.make-grid(lg);
}固定容器和流体容器的公共样式
.container-fixed(@gutter:@grid-gutter-width){ //@grid-gutter-width 表示槽宽，默认为 30px
margin-right:auto;
margin-left:auto;
padding-left:floor((@gutter/2)); // 15px
padding-right:ceil((@gutter/2)); // 15px
&:extend(.clearfix all);
}
//其中 .clearfix 内容如下
.clearfix(){
&:before,
&:after{
content:"";
display:table;
}
&:after{
clear:both;
}
}固定容器的特定样式
@media(min-width:@screen-sm-min){
width:@container-sm;
}
@media(min-width:@screen-md-min){
width:@container-md;
}
@media(min-width:@screen-lg-min){
width:@container-lg;
}
//上述媒体查询必须从小到大，当屏幕大于 1200 时前两种媒体查询也会读到，但前面会被最后一个覆盖，若屏幕小于 768 时，则三种媒体查询都不会读到，width 则为默认值 auto行
行两侧都有 -15px 的 margin
.make-row(@gutter:@grid-gutter-width){
margin-left:ceil((@gutter/-2)); //-15px
margin-right:floor((@gutter/-2)); //-15px
&:extend(.clearfix all);
}列
公共样式：列两侧都有 15px 的 padding，开启相对定位
float
width：1~12个级别
left、right（列排序）：0~12，0:auto
margin-left（列偏移）：0~12
在列排序中注意阈值上样式的设置不能跳跃，即例如不能设置完 col-lg-push-x 后直接设置 col-sm-push-x，中间的 col-md-push-x 也需设置
第一步：.make-grid-columns()
.make-grid-columns(){
.col(@index){
@item:~".col-xs-@{index},.col-sm-@{index},.col-md-@{index},.col-lg-@{index}";
.col((@index + 1),@item) //此处不是递归，因为形参个数不同
//即.col(2,".col-xs-1,.col-sm-1,.col-md-1,.col-lg-1")
}
.col(@index,@list) when (@index =< @grid-columns){
@item:~".col-xs-@{index},.col-sm-@{index},.col-md-@{index},.col-lg-@{index}";
.col((@index + 1),~"@{list},@{item}") //此处是递归
//即.col(3,".col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2")
//...
//.col(13,str)
//其中 str:
// .col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,
// .col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,
// ...
// .col-xs-12,.col-sm-12,.col-md-12,.col-lg-12,
}
.col(@index,@list) when (@index > @grid-columns){
@{list}{
position:relative;
min-height:1px;
padding-left:ceil((@grid-gutter-width/2));
padding-right:floor((@grid-gutter-width/2));
}
}//即str{position:...}，str作为选择器
.col(1);
}上面整体相当于执行了
.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,
.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,
...
.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12{
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}第二步：.make-grid(xs)
.make-grid(@class){
.float-grid-columns(@class);
//相当于 .col-xs-1,.col-xs-2,...,.col-xs-12{
// float:left;
//}
.loop-grid-columns(@grid-columns,@class,width); //从 12 递减到 1
//相当于 .col-xs-12{
// width:12/12;
//}
//.col-xs-11{
// width:11/12;
//}
//...
//.col-xs-1{
// width:1/12;
//}
.loop-grid-columns(@grid-columns,@class,pull); //列排列，从 12 递减到 0
.loop-grid-columns(@grid-columns,@class,push); //列排列，从 12 递减到 0
.loop-grid-columns(@grid-columns,@class,offset); //列偏移，从 12 递减到 0
}第二步中.float-grid-columns(@class)
//其中
.float-grid-columns(@class){
.col(@index){
@item:~".col-@{class}-@{index}";
.col((@index + 1),@item);
}
.col(@index,@list) when (@index =< @grid-columns){
@item:~".col-@{class}-@{index}";
.col((@index + 1),~"@{list},@{item}");
}
.col(@index,@list) when (@index > @grid-columns){
@{list}{
float:left; //本质使用 float
}
}
.col(1);
}第二步中.loop-grid-columns(@index,@class,@type)
.loop-grid-columns(@index,@class,@type) when (@index >= 0){
.calc-grid-column(@index,@class,@type);
.loop-grid-columns((@index-1),@class,@type);
}
.calc-grid-column(@index,@class,@type) when (@type = width) and (@index > 0){ //调用 12 次
.col-@{class}-@{index}{
width:percentage((@index/@grid-columns));
}
}
.calc-grid-column(@index,@class,@type) when (@type = push) and (@index > 0){ //调用 12 次
.col-@{class}-push-@{index}{
left:percentage((@index/@grid-columns));
}
}
.calc-grid-column(@index,@class,@type) when (@type = push) and (@index = 0){ //调用 1 次
.col-@{class}-push-0{
left:auto;
}
}
.calc-grid-column(@index,@class,@type) when (@type = pull) and (@index > 0){ //调用 12 次
.col-@{class}-pull-@{index}{
right:percentage((@index/@grid-columns));
}
}
.calc-grid-column(@index,@class,@type) when (@type = pull) and (@index = 0){ //调用 1 次
.col-@{class}-pull-0{
right:auto;
}
}
.calc-grid-column(@index,@class,@type) when (@type = offset){ //调用 13 次，index 为 0 时，margin-left 为 0
.col-@{class}-offset-@{index}{
margin-left:percentage((@index/@grid-columns));
}
}
//以 push 为例执行时相当于 .col-xs-push-12{
// left:12/12;
//}
//.col-xs-push-11{
// left:11/12;
//}
//...
//.col-xs-push-1{
// left:1/12;
//}
//.col-xs-push-0{
// left:auto;
//}栅格组合
栅格组合即在一个列中写多个不同的栅格
<div class="container">
<div class="row">
<div class="col-lg-10 col-md-6">xxx</div>
<div class="col-lg-2 col-md-6">xxx</div>
</div>
</div>当 992 < 视口大小 < 1200 （md）时，布局为两列每列占 6 格，此时不执行 lg
栅格组合就是利用了 less 的递归
栅格实例
lg 时每行 4 块、md 时每行 3 块、sm 时每行 2 块、xs 时每行 1 块，显示时按照 1234 顺序显示，但是缩小窗口时，1 会最先换到下一行（正常情况下是 4 先换行）
<div class="container">
<div class="row">
<div class="col-lg-3 col-lg-push-9 col-md-4 col-md-push-8 col-sm-6 col-sm-push-6">
...
4
...
</div>
<div class="col-lg-3 col-lg-push-3 col-md-4 col-md-pull-0 col-sm-6 col-sm-pull-6">
...
3
...
</div>
<div class="col-lg-3 col-lg-pull-3 col-md-4 col-md-pull-8 col-sm-6">
...
2
...
</div>
<div class="col-lg-3 col-lg-pull-9 col-md-4 col-sm-6">
...
1
...
</div>
</div>
</div>自定义栅格系统
1、新建文件夹，并新建文件 custom.less
@import "mixin/clearfix.less";
@import "mixin/grid.less";
@import "mixin/grid-framework.less";
@import "grid.less";
@import "variables.less";
//以上是栅格系统相关源码注意 clearfix.less 中 .clearfix 后不能有空格、、括号
2、把 grid-framework.less 文件中的 col-xxx 全部重命名为自定义名字，如 custom-col-xxx
3、使用 Kaolo 软件对文件夹文件进行编译，会生成 custom.css、variable.css、mixin/clearfix.css、mixin/grid.css、mixin/grid-framework.css，只需用到其中的 custom.css
4、只需在 html 文件中引入 custom.css 即可使用
<link rel="stylesheet" type="text/css" href="custom.css">
<style>
*{
box-sizing:border-box;
}
</style>html 中通过 custom-col-xxx 使用自定义栅格
栅格盒模型设计精妙之处
容器两边具有 15px 的 padding
行两边有 -15px 的 margin
列中间两边有 15px 的 padding（必须）
为了维护槽宽的规则，列两边必须有 16px 的 padding
为了能使列嵌套行，行两边必须有 -15px 的 margin
为了让容器能包裹住行，容器两边必须有 15px 的 padding
3、响应式工具
visible-xs、hidden-xs 视口大小 < 768 时显示/隐藏
visible-sm、hidden-sm 768 < 视口大小 < 992 时显示/隐藏
visible-md、hidden-md 992 < 视口大小 < 1200 时显示/隐藏
visible-lg、hidden-lg 视口大小 > 1200 时显示/隐藏
4、bootstrap 定制化
方法一：在源码中修改，并重新编译入口文件 bootstrap.less 后，在 html 代码中使用新生成的 bootstrap.css 文件
方法二：新建 css 文件，在该文件中
@import "bootstrap.less";
//接下来写需要修改的部分
@grid-gutter-width:100px; //如修改槽宽然后编译该 css 文件，并在 html 文件中使用