这里是修真院前端小课堂,每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能,本篇分享的是:
【什么是bootstrap 】
标题:
什么是bootstrap
开场语:
大家好,我是IT修真院上海分院第十期的学员林璇,一枚正直纯洁善良的程序员,今天给大家分享一下,修真院官网WEB(职业)任务九,深度思考中的知识点——bootstrap
(1)背景介绍:
什么是bootstrap
Bootstrap,来自 Twitter公司开发的一个HTML和CSS的一个技术框架
通过了这些的框架,可以创造出很多的WEB的好看的界面
Bootstrap,分为哪些?
Bootstrap分为3和4,他们的区别是在于
bootstrap3和bootstrap4最大的区别就是4用的是flex布局,3用的是float浮动
bootstrap4的栅格类特小(col-),bootstrap3的栅格类特小(col-xs)
bootstrap4新增加的栅格特大(col-xl-)
bootstrap4用offset来移动bootstrap3用push和pull向左和向右移动
什么是栅格系统(网格系统)
网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载。
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,
可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类
Bootstrap4 网格系统规则:
网格每一行需要放在设置了 .container (固定宽度)
.container-fluid (全屏宽度) 类的容器中,
或这样就可以自动设置一些外边距与内边距。
内容需要放置在列中,并且只有列可以是行的直接子节点。
预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
(2)知识剖析:
Bootstrap4网格系统有以下 5 个类:
.col- 针对所有设备
超小设备小于576px
None (auto)
列数量和 12
30px (一个列的每边分别 15px)
可嵌套 Yes
列排序 Yes
.col-sm-
容器最大宽度540px
列数量和 12
30px (一个列的每边分别 15px)
可嵌套 Yes
.col-md-
大于等于768px
容器最大宽度720px
列数量和 12
30px (一个列的每边分别 15px)
可嵌套 Yes
.col-lg-
大于等于992px
容器最大宽度960px
列数量和 12
30px (一个列的每边分别 15px)
可嵌套 Yes
.col-xl-
大于等于1200px
容器最大宽度是1140px
列数量和 12
30px (一个列的每边分别 15px)
可嵌套 Yes
(3)常见问题:
栅格系统其他的布局方法是什么?
(4)解决方案:
任务八和九的最下面的布局方案,有使用横移的,也有直接使用了分成三列来布局的
(5)编码实战:
<div class="container irtxzy">
<!-- in regard to关于修真院 -->
<div class="row">
<div class="col-sm-4 link1">
<span class="JNSS">技能树 — 改变你我 </span>
<a class="irtt">关于我们</a>
<a class="touch">丨联系我们丨</a>
<a class="ilk">友情链接</a>
</div>
<div class="col-md-4 link1">
<span class="website">旗下网站</span>
<!-- 第一个名称 -->
<a class="nameonee">草船云孵化器</a>
<a class="nameone">最强IT特训营</a>
<!-- 第二个名称 -->
<div>
<a class="PTTGAME">葡萄藤轻游戏 </a>
<a class="JNS">桌游精灵</a>
</Div>
(6)拓展思考:
在使用Bootstrap4的时候遇到浮动的问题要怎么办
答:Bootstrap4自带了清楚浮动的效果
(7)参考文献:
{1}博客
{2}b站视频
(8)更多讨论:
Q1:.container,row,col有什么关系?他们的工作原理是什么?
A1:container类用于固定宽度并支持响应式布局的容器。 .row和.col类配合用于为其赋予合适的排列和内补。
Q2:css 阶段能做组件化吗?
A2:不能,组件化是HTML、css、JavaScript三方共同作用
Q3:CSS阶段不做组件化,那不叫组件化,叫什么呢?
A3:目前只能叫做样式库
(9)鸣谢:
感谢王刚、郭巍师兄,此教程是在他们之前技术分享的基础上完善而成。
(10)结束语:
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
更多内容,可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院:https://www.jnshu.com,初学者转行到互联网的聚集地