Bootstrap的快速搭建

最新推荐文章于 2025-03-20 14:17:49 发布

豆豆大世界

最新推荐文章于 2025-03-20 14:17:49 发布

阅读量2.4k

点赞数 56

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/weixin_68397667/article/details/139363636

版权

一、Bootstrap前端框架笔记

1.1简介

Bootstrap 是全球最受欢迎的前端框架，用于构建响应式、移动设备优先的网站。利用 jsDelivr 和我们提供的入门模板帮助你快速掌握 Bootstrap。

优点：

标准化的html+css编码规范
提供了一套简洁直观的zujian
有自己的生态圈，不断地跟新迭代
让开发变得更简单，提高了开发效率

1.2 Bootstrap使用规范

创建文件夹结构
创建html骨架结构
引入相关样式文件
书写内容

1.3 书写内容修改原来的样式

直接拿Bootstrap优先定义好的样式来使用
修改原来的样式时，要注意权重问题
学好bootstrap的关键是知道他定义了那些样式，以及这些样式实现了什么效果

1.4快速入门

快速入门：https://v4.bootcss.com/docs/getting-started/introduction/

2、布局容器

2.1 .containe容器

用于布置Bootstrap项目的组件和选项，包括包装容器、强大的网格系统、灵活的媒体对象和响应实用程序类。容器是Bootstrap中最基本的布局元素，在使用默认网格系统时是必需的。容器用于容纳、填充和（有时）集中其中的内容。虽然容器可以嵌套，但大多数布局不需要嵌套容器。

.container, which sets a max-width at each responsive breakpoint

响应式布局容器固定宽度
大屏（>=1200px) 固定 1140px
Large 中屏（≥992px）固定960px
Medium 中小屏（≥768px）固定720px
Small 小屏（≥576px）固定540px
超小屏幕（<576px） 100%

2.2.container-fluid

.container-fluid, which is width: 100% at all breakpoints

流式布局容器宽度为100%
占据全部视口（vivewport)的容器
适合单独做移动端开发

3 、Bootstrap网/栅格系统（grid system）

使页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrp提供了一套响应式、移动设备优先的流式的栅格系统，随着屏幕或者视口尺寸的增加，系统会自动分为最多12列。

Bootstrap里面的container宽度是固定的，但是在不同屏幕下，我们再把container划分为12等分。

3.1 简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

通过研究后面的实例，可以将这些原理应用到你的代码中。

3.2 栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

栅格系统用于一系列的行(row)和列(column)的组合来构建页面布局，你的内容就可以放入你创建好的布局中

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

注意：

每一列默认有左右15个像素的padding。
可以同时为一列指点多个设备的类名，以方便划分不同份数。

3.3 container实例说明水平排列

我们展示的是大屏使用的是：col-xl-？

代码说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-4.6.2-dist/css/bootstrap.min.css"></link>
    <style>
        [class^=col]{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
       <div class="row">
            <div class="col-xl-3">1</div>
            <div class="col-xl-3">2</div>
            <div class="col-xl-3">3</div> 
            <div class="col-xl-3">4</div>
       </div>
       <hr>
        如果孩子的份数相加等于12 则孩子能占满整个的 container 的宽度   class="col-xl-6" 中6就是份数
       <div class="row">
            <div class="col-xl-6">1</div>
            <div class="col-xl-2">2</div>
            <div class="col-xl-2">3</div> 
            <div class="col-xl-2">4</div>
        </div>
        <hr>
       如果孩子的份数相加小于12 则孩子能占不满整个的 container 的宽度 会有空白 
       <div class="row">
            <div class="col-xl-6">1</div>
            <div class="col-xl-2">2</div>
            <div class="col-xl-2">3</div> 
            <div class="col-xl-1">4</div>
        </div>
        <hr>
        如果孩子的份数相加大于12  多余的那一列 会另起一列
       <div class="row">
            <div class="col-xl-6">1</div>
            <div class="col-xl-2">2</div>
            <div class="col-xl-2">3</div> 
            <div class="col-xl-3">4</div>
        </div>
    </div>
</body>
</html>

效果：

在这里插入图片描述 )当大屏幕缩小时就会自适应的去展示：

在这里插入图片描述

3.4 栅格系统的列嵌套

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

Level 2: .col-xs-8 .col-sm-6

Level 2: .col-xs-4 .col-sm-6

Copy

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-4.6.2-dist/css/bootstrap.min.css"></link>
    <style>
        [class^=col]{
            background-color: pink ;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
       <div class="row">
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-4">a</div>
                    <div class="col-md-8">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div> 
       </div>
    </div>
</body>
</html>

列嵌套加一个row效果更好。

3.5 列偏移

使用类将列向右移动.offset-md-*。这些类将列的左边距增加一列*。例如，.offset-md-4移动.col-md-4四列。

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

Copy

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

Copy

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

3.6 列排序

4.0前是 pull 和 push.

使用.order-类来控制内容的视觉顺序order。这些类是响应式的，因此您可以设置断点（例如.order-1.order-md-2）。包括对所有五个网格层的1支持。12

DOM 中的第一个，无顺序

DOM 中排名第二，顺序较大

DOM 中排名第三，顺序为 1

复制

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

还有响应式.order-first和.order-last类，它们分别通过应用和（）来更改order元素的。这些类也可以根据需要与编号类混合使用。order: -1``order: 13``order: $columns + 1``.order-*

DOM 中的第一个，最后排序

DOM 中的第二个，无序

DOM 中的第三个，排在第一位

复制

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-4.6.2-dist/css/bootstrap.min.css"></link>
    <style>
        .row div{
            height: 50px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 order-last">左边</div>
            <div class="col-md-8 order-first">右边</div>
        </div>
    </div>
</body> 
</html>