-
滚动条的使用:
- 你想让谁滚动,就在外面再给它包一个盒子,让外面这个盒子的宽度比较小(外面盒子不可以和里面盒子一样宽);
- 再给外面盒子加css代码:overflow:auto/scroll;
- oveflow默认值是visibility;
- 理解:滚动条其实不是在自身的元素身上,而是在它的父盒子身上;
响应式布局:
-
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
- 上面的link引入是固定的,要写在style里面;
响应式宽度变化:
-
<ul> <li class="col-md-3 col-sm-6 col-xs-12"></li> <li class="col-md-3 col-sm-6 col-xs-12"></li> <li class="col-md-3 col-sm-6 col-xs-12"></li> <li class="col-md-3 col-sm-6 col-xs-12"></li> </ul>
- 一个ul里面有四个li:
- 当屏幕大于等于992px时,每个li的宽度为25%;
- 当屏幕大于等于768px小于992px时,每个li的宽度为50%;
- 当屏幕小于768px时,每个li的宽度为100%;
bookstrap栅格系统:
- 作用:实现响应式开发:
- 自适应:元素的大小会跟着屏幕宽度的变化等比例变化;
- 响应式:元素的布局会随着屏幕的宽度变化而变化;
- BootStrap把一行分为12等份,一个元素需要占几份就在代码中写几份就行;
元素的显示与隐藏:
- (案例)两个div盒子,里面文字分别为”我”和“你”:
- 实现如下效果: 当屏幕宽度大于等于992px时只显示”我”; 当屏幕宽度小于992px时只显示”你”;