他不是好不好用的问题!他真是的那种,那种很少见的那种,他有标准化的html+css编码规范,提供了一套简介,直观,强悍的组件,有自己的生态圈,不断地更新迭代,连格子都给你分好了,遗憾是就是太好用无脑了,导致我到现在对其他web布局都看不上了。
前言
当我学web移动端布局be like:
当我接触到栅格系统be like:
虽然你问我学会了啥be like:
但是,盒子,是摆好的的盒子,你问我我啥都不知道,但是利用栅格系统,只需要自己定义位置占据的份数,就能做好看完整的格局。这就是他的强大之处。
先聊聊Bootstrap
简介
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷
优点:
1.标准化的html+css编码规范
2.提供了一套简介,直观,强悍的组件
3.有自己的生态圈,不断地更新迭代
4.让开发更简单,提高了开发效率
网站
1.https://www.bootcss.com/
该网站是Bootstrap的中文网站,下载,文档教程应有尽有。
好兄弟,路都指给你不会还用不来吧。
2.https://getbootstrap.com/
此网站有官方网站,如果你有足够的英语水平,去吧,随便去玩。
使用方式
1.首先去Bootstrap中文网站下载下来
2然后解压放在工程文件夹里面
解压放置关系如上
3.最后引用
引用代码案例:
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
现在可以用栅格系统为所欲为了
简介
1.将页面布局划分为等宽的列,然后通过列数的定义来模板化页面布局
3.Bootstrap提供了一套响应式,移动设备优先的流式栅格系统,随着屏幕或者视口尺寸的增加,系统会自动分为最多12列
3.Bootstrap里面的container宽度是固定的,但是不同屏幕下,container的宽度不同,我们吧container划分为12等分
选项参数
使用案例
栅格系统使用
<style>
[class^="col"] {
border: 1px solid #ccc;
}
.container .row:nth-child(1) {
background-color: pink;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
<!-- 如果孩子的份数相加等于12,这孩子能占满一行 -->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-1">4</div>
</div>
<!-- 如果孩子的份数相加小于12,则会空白 -->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-3">3</div>
</div>
<!-- 如果孩子的份数相加大于12,则会多余一列会另起一行显示 -->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-6">4</div>
</div>
</div>
</body>
效果:
列偏移
col-md-offset-*
<style>
.row div {
height: 59px;
background-color: pink;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">左侧</div>
<!-- 偏移份数,12-两个盒子的份数 -->
<div class="col-md-4 col-md-offset-4">右侧</div>
</div>
<div class="row">
<!-- 中间盒子 -->
<div class="col-md-8 col-md-offset-2">左侧</div>
</div>
</div>
</body>
效果:
列排序
col-md-push-*推
col-md-pull-*拉
<style>
.row div {
height: 59px;
background-color: pink;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">左侧</div>
<div class="col-md-8 col-md-pull-4">右侧</div>
</div>
</div>
</body>
效果如下
响应式工具
代码案例:
<div class="container">
<div class="row">
<div class="col-xs-3">
<span class="visible-lg">11</span>
</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3 .hidden-md hidden-xs visible-sm">响应式hidden</div>
<div class="col-xs-3">4</div>
</div>
</div>
效果自己看,懒得放图(什