Bootstrap的学习分享

2024-05-29 07:42:24

大家好，这里是demo软件园，今天为大家分享的是Bootstrap的学习分享。

众所周知Bootstrap是一款简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

流体布局容器
容器的width为auto，只是两边加了15px的padding。
固定布局
容器的width会随设备分辨率的不同而生产变化
分辨率阈值
w >=1200 容器的width为1170 左右padding为15 （注意是borderBox）
1200>w >=992 容器的width为970 左右padding为15 （注意是borderBox）
992 > w >=768 容器的width为750 左右padding为15 （注意是borderBox）
768 > w 容器的width为auto 左右padding为15 （注意是borderBox）

栅格源码分析
1.流体容器&固定容器公共样式
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
2.固定容器特定样式
顺序不可变
@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;
}
3.行
margin-left: -15px;
margin-right: -15px;
4.列
.make-grid-columns()—>
.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)—>
float-grid-columns(@class);
* .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,…col-xs-12{
* float: left;
* }
.loop-grid-columns(@grid-columns, @class, width);
* .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);
.loop-grid-columns(@grid-columns, @class, push);
*push pull:
* .col-xs-push-12{ .col-xs-pull-12{
* left:12/12; right:12/12;
* } }
* .col-xs-push-11{
* left:11/12;
* }
* … …
* .col-xs-push-1{
* left:1/12;
* }
* .col-xs-push-0{ .col-xs-pull-0{
* left:auto; right:auto;
* } }
.loop-grid-columns(@grid-columns, @class, offset);
列偏移
调整的是margin-left，分13个等级（0到12）0时为0%
列排序
push的时候调整的是left，分13个等级（0到12）
0时为auto
pull的时候调整的是right，分13个等级（0到12）
0时为auto

容器与栅格盒模型设计的精妙之处

container容器提供了一个15px的padding
row是column直接存在的容器，row默认最多可有12个column，
同时作为都是左浮动的column的wrapper，自带 clearfix 的性质。
同时row还有一个很特殊的地方，就是左右各有-15px的margin，
为了抵消container中15px的padding
每个column也会有15px的水平方向的padding，colunmn只能在row中生存，
由于row的margin 为－15px，那么位于两边的column就碰到了container的边界。
但是colunmn 本身又有15px的padding使得它其中的内容并不会碰到 container，同时，不同column的内容之间就有了30px的槽，目的是为了确保列与列之间有30px的槽，列与容器之间有15px的槽。
简单来说，就是：
容器两边具有15px的padding 、
行两边具有-15px的margin
列两边具有15px的padding
为了维护槽宽的规则，
列两边必须得要15px的padding
为了能使列嵌套行
行两边必须要有-15px的margin
为了让容器可以包裹住行
容器两边必须要有15px的padding

Bootstrap的学习分享相关推荐

Web前端开发入门学习分享
Web前端开发入门学习分享 1:如何开始学习Web前端首先你需要学习html的各个标签,掌握其用法和规范,明白其作用. 开始学习css的使用,你先学习在html页面中为标签增加css样式,其次是将c ...
胡锐锋：组队学习分享（队长）
组队学习分享(队长) 自我介绍胡锐锋,现为Datawhale成员,目前担任<统计学习方法习题解答>开源项目的负责人,已工作近8年,由大数据平台研发工程师转变成一位项目管理人.我的人生目标 ...
python anylogic_分享 | IE工具与仿真软件学习分享会
原标题:分享 | IE工具与仿真软件学习分享会 6月18日晚,IE工具与仿真软件学习分享会在经济与管理学院704教室顺利举行,此次分享会,有幸邀请到了欧阳林寒老师.大三学长张宇航和葛胜贤为大家讲解相关 ...
python中if语句缺省else_9_【Python学习分享文章】_if(条件语句)
[Python学习分享文章]_if(条件语句)_logicalJudgement介绍及基本操作综述计算机的"条件语句"和生活中的"条件成立"是不一样的. 一 ...
学习分享会（2019.5.31）
学习分享会 First(初三大佬发言) 初三大佬在为初二大佬讲一堆哲学的道理,虽然十分高深,但还是听懂了一点点 Second(初二大佬发言) 初二大佬开始"秀",首先是大佬LW讲了 ...
datatable的数据进行组内排序_排序算法学习分享（四）希尔排序
排序,也称为排序算法,可以说是我们学习算法的过程中遇到的第一个门槛,也是实际应用中使用得较为频繁的算法,我将自己对所学的排序算法进行一个归纳总结与分享,如有错误,欢迎指正! 排序算法学习分享(一)选择 ...
bootstrap基础学习【菜单、按钮、导航】（四）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>boo ...
Bootstrap 框架学习目录
Bootstrap 框架学习目录转载于:https://www.cnblogs.com/ydchw/p/3708259.html
佐切的第一天学习分享
从哪学呢?这对于我来说也是个很大的问题. 由于之前有看过一点php的视频教程,就从基础的html开始对之前看点那点视频教程的回顾. ①首先自己的一个认识,网页通过www.^^^^^来访问,这个协议是美 ...

最新文章

热门文章