滚动条,响应式,元素的显示与隐藏8.15

• 滚动条的使用:

1. 你想让谁滚动,就在外面再给它包一个盒子,让外面这个盒子的宽度比较小(外面盒子不可以和里面盒子一样宽);
2. 再给外面盒子加css代码:overflow:auto/scroll;
3. oveflow默认值是visibility;
4. 理解:滚动条其实不是在自身的元素身上,而是在它的父盒子身上;

响应式布局:

•   <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:

1. 当屏幕大于等于992px时,每个li的宽度为25%;
2. 当屏幕大于等于768px小于992px时,每个li的宽度为50%;
3. 当屏幕小于768px时,每个li的宽度为100%;

bookstrap栅格系统:

• 作用:实现响应式开发:
• 自适应:元素的大小会跟着屏幕宽度的变化等比例变化;
• 响应式:元素的布局会随着屏幕的宽度变化而变化;
• BootStrap把一行分为12等份，一个元素需要占几份就在代码中写几份就行;
• 

 元素的显示与隐藏:

• 
•  (案例)两个div盒子，里面文字分别为”我”和“你”:
• 实现如下效果： 当屏幕宽度大于等于992px时只显示”我”； 当屏幕宽度小于992px时只显示”你”；