【BootStrap】前端开发框架 | bootstrap栅格系统

我是哈哈hh

已于 2025-04-01 08:12:40 修改

阅读量992

点赞数 17

分类专栏： jQuery 文章标签： bootstrap 前端 javascript jquery 语法基础 html css

于 2025-04-01 01:50:29 首次发布

本文链接：https://blog.youkuaiyun.com/2301_80636070/article/details/146885201

版权

jQuery 专栏收录该内容

7 篇文章

订阅专栏

总结不易~本章节对我有很大的收获，希望对你也是！！！

1 Bootstrap 简介

Bootstrap 是一个开源的前端开发框架，用于帮助开发者快速设计和开发响应式、移动优先的网页。它由 Twitter 的开发者 Mark Otto 和 Jacob Thornton 在 2011 年创建，目的是为了让网页开发变得更加简单和高效。

框架：顾名思义就是有一套比较完整的解决方案，而且控制权再框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发！

bootstrap的使用：

引入之后就是这样的：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--[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]-->
  <!-- 引入bootstrap文件 -->
  <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">

</head>

<body>
  <button type="button" class="btn btn-danger">（危险）Danger</button>
</body>

</html>

现在我们随便找一个按钮来观察样式即可：

  <button type="button" class="btn btn-danger">（危险）Danger</button>

说明是成功引入bootstrap文件

bootstrap使用四部曲：1. 创建文件夹结构 2. 创建html骨架结构 3. 引入相关样式文件 4. 书写内容

4. 书写内容：

直接拿bootstrap预先定义好的样式来使用
修改bootstrap原来的样式，注意权重问题
学好bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能够实现什么样的效果

bootstrap需要为页面内容和栅格系统包裹一个.container容器， bootstrap预先定义好了这个类，叫.countainer 它提供了两个作此用处的类

1. container类

响应式布局的容器固定宽度

大屏 (>= 1200px) 宽度定为1170px
中屏 (>= 992px) 宽度定为 970px
小屏 (>= 768px) 宽度定为 750px
超小屏 (100%)

大屏：

超小屏：

此时就能够直接加入container类进行应用了

  <div class="container"></div>

2. container-fluid类

流式布局容器百分百宽度
占据全部视口(viewport)的容器
适合于单独做移动开发

bootstrap栅格系统：

1. 栅格系统的基本原理

Bootstrap 的页面布局基于 12 列网格（一行可以最多分成 12 份）。
你可以使用不同的类来定义列的宽度，比如 col-6 表示占 6 列（即 50%）。
网格系统通过 行（row） 和 列（col） 组成：
- 行（row）：用于包裹列（col），确保列正常排列。
- 列（col）：用于定义内容的宽度，占据多少列。
栅格是 响应式的，可以根据不同的屏幕尺寸调整布局

2. 基本用法

<div class="container">
  <div class="row">
    <div class="col-6" style="background-color: lightblue;">占 6 列</div>
    <div class="col-6" style="background-color: lightcoral;">占 6 列</div>
  </div>
</div>

类名前缀	适用设备	断点（px）
`col-`	所有设备	默认（不响应式）
`col-sm-`	小屏幕（手机）	≥576px
`col-md-`	中等屏幕（平板）	≥768px
`col-lg-`	大屏幕（桌面）	≥992px
`col-xl-`	超大屏幕	≥1200px

当我拥有4个div瓜分整个屏幕的时候，那么每个div都占3份，一起总共有12份

  <div class="container">
    <div class="row">
      <div class="col-lg-3" style="background-color: red;">1</div>
      <div class="col-lg-3" style="background-color: yellow;">2</div>
      <div class="col-lg-3" style="background-color: skyblue;">3</div>
      <div class="col-lg-3" style="background-color: blue;">4</div>
    </div>
  </div>

当我缩小的时候

当每个div分到不均匀时：

  <div class="container">
    <div class="row">
      <div class="col-lg-3" style="background-color: red;">1</div>
      <div class="col-lg-3" style="background-color: yellow;">2</div>
      <div class="col-lg-3" style="background-color: skyblue;">3</div>
      <div class="col-lg-3" style="background-color: blue;">4</div>
    </div>
    <div>-----------------------------------------------------</div>
    <!-- 如果孩子份数相加等于12 则孩子能够占满整个container的宽度 -->
    <div class="row">
      <div class="col-lg-6" style="background-color: red;">1</div>
      <div class="col-lg-2" style="background-color: yellow;">2</div>
      <div class="col-lg-2" style="background-color: skyblue;">3</div>
      <div class="col-lg-2" style="background-color: blue;">4</div>
    </div>
    <div>-----------------------------------------------------</div>
    <!-- 如果孩子份数相加 小于 12 则孩子不能够占满整个container的宽度 会有空白 -->
    <div class="row">
      <div class="col-lg-6" style="background-color: red;">1</div>
      <div class="col-lg-1" style="background-color: yellow;">2</div>
      <div class="col-lg-1" style="background-color: skyblue;">3</div>
      <div class="col-lg-1" style="background-color: blue;">4</div>
    </div>
    <div>-----------------------------------------------------</div>
    <!-- 如果孩子份数相加 大于 12 则多余的那一列 会另起一行来显示 -->
    <div class="row">
      <div class="col-lg-6" style="background-color: red;">1</div>
      <div class="col-lg-3" style="background-color: yellow;">2</div>
      <div class="col-lg-3" style="background-color: skyblue;">3</div>
      <div class="col-lg-3" style="background-color: blue;">4</div>
    </div>
  </div>

当我们处于中等屏幕下，从一行放4个div变成一行放3个div

处于小屏幕下，一行放2个div

  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="background-color: red;">1</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="background-color: yellow;">2</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="background-color: skyblue;">3</div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="background-color: blue;">4</div>
    </div>
    <div>-----------------------------------------------------</div>

列嵌套

如果这个列嵌套不加上row，那么父元素的padding值就不会被取消，会存在a b 两个子元素占不满的情况

所以加上row

  <div class="container">
    <div class="col-md-4" style="background-color: pink;">
      <!-- 我们列嵌套最好要加一个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高 -->
      <div class="row">
        <div class="col-md-6" style="background-color: skyblue;">a</div>
        <div class="col-md-6" style="background-color: red;">b</div>
      </div>
    </div>
    <div class="col-md-4" style="background-color: yellow;">2</div>
    <div class="col-md-4" style="background-color: black;">3</div>
  </div>

列偏移

使用.col-md-offset-*类可以将列向右侧偏移，这些类实际是通过使用* 选择器为当前元素增加了左侧的边距

想做出这种有一个盒子是右偏移的效果，因为盒子默认是左偏移

  <div class="container">
    <div class="row">
      <div class="col-md-3">左侧</div>
      <div class="col-md-3 col-md-offset-6">右侧</div>
    </div>
  </div>

列排序

原本是这样的，我们要通过对盒子进行左拉和右推进行对盒子的不同定位

实现左盒子跑到右边去，右盒子拉到左边来

  <div class="container">
    <div class="row">
      <div class="col-md-4 col-md-push-9">左侧</div> // 往右边推
      <div class="col-md-8 col-md-pull-4">右侧</div> // 往左边拉
    </div>
  </div>

响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

与之相反的，是visible-xs visible-sm 是显示某个页面内容可见

可以指定某一列在屏幕被缩小时，指定的被隐藏掉，这样就不会占据太多空间！

当3这个模块处于中等屏和超小屏时就会被隐藏掉

  <div class="container">
    <div class="row">
      <div class="col-xs-3" style="background-color: red;">1</div>
      <div class="col-xs-3" style="background-color: yellow;">2</div>
      <div class="col-xs-3 hidden-md hidden-xs" style="background-color: skyblue;">3</div>
      <div class="col-xs-3" style="background-color: blue;">4</div>
    </div>
  </div>