欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【Bootstrap学习笔记】2.栅格系统、辅助类和响应式工具

程序员文章站 2022-04-29 22:43:22
...

五、栅格系统

学习内容

  • 栅格系统相关概念
  • 网格选项
  • 列偏移、嵌套、交换位置(排序)

● 概念

Bootstrap提供了一套响应式移动设备优先流式栅格系统。

移动设备优先:设置如下meta,即屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

布局容器:栅格系统需要放置在容器内,分为container和container-fluid两种容器,这两种容器不能相互嵌套。.container会做@media媒体查询来改变width,.container-fluid永远是100%的width。

//固定宽度
<div class="container">...</div>

//100%宽度
<div class="container-fluid">...</div>

【Bootstrap学习笔记】2.栅格系统、辅助类和响应式工具

● 网格选项

网格选项 超小设备手机(<768px) 小型设备平板电脑(≥768px) 中型设备台式电脑(≥992px) 大型设备台式电脑(≥1200px)
网格行为 一直是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes

● 列偏移、嵌套、交换位置(排序)

.col-md-offset-3
.col-md-push-3 .col-md-pull-3

<div class="container">
     原始行
     <div class="row">
         <div class="col-md-8 a">8</div>
         <div class="col-md-2 a">2</div>
     </div><br>
     列偏移,82整体移动
      <div class="row">
          <div class="col-md-8 col-md-offset-1 a">8</div>
          <div class="col-md-2 a">2</div>
      </div><br>
      列偏移,多了会换行
      <div class="row">
          <div class="col-md-8 col-md-offset-9 a">8</div>
          <div class="col-md-2 a">2</div>
      </div><br>
      嵌套,含15px的padding
      <div class="row">
          <div class="col-md-9 a">
              <div class="col-md-4 a">4</div>
              <div class="col-md-4 a">4</div>
              <div class="col-md-4 a">4</div>
          </div>
          <div class="col-md-3"></div>
      </div><br>
      交换位置,单体移动,不换行
      <div class="row">
          <div class="col-md-9 a">9</div>
          <div class="col-md-3 col-md-push-3 a">3</div>
      </div>
  </div>

【Bootstrap学习笔记】2.栅格系统、辅助类和响应式工具

六、辅助类和响应式工具

学习内容

  • 相关概念
  • 辅助类
  • 响应式工具

● 概念

辅助类:系统提供的,用来辅助页面设计的辅助样式。例如前景色、背景色、显示关闭图标等。
响应式工具:利用媒体查询显示或隐藏某些内容。

●辅助类

1、前景色(6种)
.text-muted .text-primary .text-success .text-info .text-warning .text-danger

前景色
   <div class="container">
      <p class="text-muted">柔和灰</p>
      <p class="text-primary">主要蓝</p>
      <p class="text-success">成功绿</p>
      <p class="text-info">信息蓝</p>
      <p class="text-warning">警告黄</p>
      <p class="text-danger">危险红</p>
   </div>

2、背景色(5种)
.bg-primary .bg-success .bg-info .bg-warning .bg-danger

背景色
  <div class="container">
    <p class="bg-primary">主要蓝</p>
     <p class="bg-success">成功绿</p>
     <p class="bg-info">信息蓝</p>
     <p class="bg-warning">警告黄</p>
     <p class="bg-danger">危险红</p>
  </div>

【Bootstrap学习笔记】2.栅格系统、辅助类和响应式工具

3、关闭按钮
.close
&times;表示关闭符号X

<button class="close">&times;</button>

4、三角符号
.caret

<span class="caret"></span>

5、左右浮动
.pull-left .pull-right
等同于float ,用!important加强优先级

<div class="container">
    <div class="a">LEFT</div>
     <div class="a">RIGHT</div>
     <div class="pull-left a">LEFT</div>
     <div class="pull-right a">RIGHT</div>
 </div>

6、区块居中
.center-block
等同于margin:x auto ,多设置了display:block

<div class="center-block a">区块居中</div>

7、清理浮动
.clearfix

<div class="pull-left a">L</div>
<div class="clearfix"></div>
<div class="a">R</div>

8、隐藏和显示
.show .hidden

<div class="show">显示</div>
<div class="hidden">隐藏</div>

【Bootstrap学习笔记】2.栅格系统、辅助类和响应式工具

扩展了解
1..sr-only
2..sr-only-focusable
3..text-hide

●响应式工具

1、媒体查询时,针对不同屏幕大小,有时需要显示和隐藏部分内容,例如隐藏侧栏。
2、需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换
【Bootstrap学习笔记】2.栅格系统、辅助类和响应式工具
display样式:
1、.visible-*-block display: block;
2、.visible-*-inline display: inline;
3、.visible-*-inline-block display: inline-block;

相关标签: bootstrap