锐单电子商城 ， 一站式电子元器件采购平台！

  • 电话：400-990-0325

购物车

BootStrap框架模块：BootStrap4基础

时间：2023-03-13 19:30:00 7jb4继电器3th2040

BootStrap简介

Bootstrap 它支持世界上最受欢迎的前端开源工具库Sass混合、响应矩阵系统及其自身的库分量和重量JavaScript。基于Bootstrap为您快速设计和定制网站提供强大的功能。

利用 BootstrapCDN 和最简单的快速开始 Bootstrap。Bostrap 它是世界上制造响应模板和移动设备最受欢迎的前端框架 WEB 站点。

BootStrap中文官网

第一章BootStrap4基础

下载Bootstrap获得编译CSS和JavaScript文件和源代码。或者使用您擅长的包管理器（npm、 RubyGems 等）加载 Bootstrap。

编译的CSS和JS文件

下载Bootstrap.5.将0的预编译文件直接添加到您的预编译版本4中，包括：

编译并压缩（minified）之后的 CSS 文件(请参见 CSS 文件对比） 编译并压缩（minified 之后的 JavaScript 插件)不包括文档、源文件或插件 JavaScript 依赖项（jQuery 和 Popper.js）。

1.1 BootStrap 布局

Containers

Container(容器)是Bootstrap中最基本的布局元素，在使用bootstrap在默认的网格系统中，容器是必要的。容器用于容纳、填充和使内容集中。可以嵌套容器，但大多数布局不需要嵌套容器。

Bootstrap三个不同的容器：

.container: 它max-width在每个响应断点设置一个 .container-fluid: 这是width: 100%所有断点 .container-{breakpoint}: width: 100%直到指定断点

固定丰富的容器：

与strap3一样，默认.everyone类是响应式的，固定丰富的容器，这意味着它max - width更改断点。

<div class="container">    div>

container-fluid:

使用.container-fluid全宽容器，跨越整个视角宽度。

<div class="container-fluid">   ... div>

响应

响应容器是Bootstrap v4.4中的新增功能。它们允许您指定100％宽的类，直到达到指定的断点（不同屏幕的比例的节点）为止，此后，我们max-width应用于每个较高的断点。.container-sm100％宽开始直到sm到达断点，将在那里扩展md，lg和xl。

<div class="container-sm">100% 到达指定sm断点为止</div> <div class="container-md">100% 到达指定md断点为止</div> <div class="container-lg">100% 到达指定lg断点为止</div> <div class="container-xl">100% 到达指定xl断点为止</div>

响应断点

由于Bootstrap首先，它开发成移动设备，使用少数媒体查询为布局和界面创建合理的断点。这些断点主要基于最小视口宽度，并允许我们根据视口的变化按比例放大元素。p

Bootstrap主要在源Sass文件中使用以下媒体查询范围（或断点）作为布局，网格系统和组件。

//超小设备 (手机 phones, 576px 起)
@media (min-width: 576px) { 
         ... }

//小型设备 (平板电脑, 768px 起)
@media (min-width: 768px) { 
         ... }

//中型设备 (台式电脑, 992px and 起)
@media (min-width: 992px) { 
         ... }

//大型设备 (大台式电脑, 1200px 起)
@media (min-width: 1200px) { 
         ... }

1.2 栅格系统介绍

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
在这里插入图片描述

<div class="container">
  <div class="row">
    <div class="col-sm">
      三分之一空间占位
    </div>
    <div class="col-sm">
      三分之一空间占位
    </div>
    <div class="col-sm">
      三分之一空间占位
    </div>
  </div>
</div>

上面的例子使用BootStrap预定义的栅格系统，演示了在.container容器内建立了三个等宽的列，并且分别兼容在small(极窄宽度网页)、medium(中等宽度网页)、large(宽网页)、extra large(超宽网页)四种设备类型-即无论网页宽度如何，这三个列都是恒在呈现的。

让我们来慢慢揭开它的工作原理：

  • 栅格系统提供了集中内容居中、水平填充网页内容的方法，使用.container(严格意义上也包括.container-fluid，后文相同不再备注-译者)应答网页宽度，或使用.container-fluid使网页能够以100%宽度呈现在所有的浏览器窗口或设备尺寸上。
  • 行(.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下)，每列都有水平的padding值，用于控制它们之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。
  • 网页开发者的呈现内容必须放置在列(.col-*中，而且只有列可以是行的直接子元素，否则都是违法的(不可以在.col-*以上添加呈现内容。
  • 这一切都要感谢flexbox流式布局，从而使我们不需要指定列的宽度(旧版Bootsrap3是采用严格宽度定义来实现的)就能实现网页自动等宽排列，比如我们在.container中置入初始化的四个.col-sm就能实现各自25%宽度并左对齐形成一行的排列。更多示例，请参阅本文档 自动布局列部分。
  • 你可能注意到.col-*后面有不同的数字，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。如果你想用三个等宽的列，则取12的三分之一，即.col-sm-4就是正确的(后文会有详细的介绍)。
  • .col-*的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小受父元素的定义影响(这正是flexbox布局的特征，子元素的宽比和排列受父元素定义)。
  • 列具有水平padding定义，用于创建列与列之的间隙。
  • .row上带有margin-left: -15px;margin-right: -15px;属性，你可以在.row上上定义.no-gutters属性，从而消除这个属性，使页面不会额外宽出30px，即
  • 总共有五个栅格等级，每个响应式分界点隔出一个等级：特小.col、小.col-sm-、中.col-md-、大.col-lg-、特大（大、特大也可以称为宽、超宽）.col-xl-。
  • 栅格断点的媒体查询基于宽度的最小值，意味着它们应用到某一等级以及这一等级之上的所有（如.col-sm-4的的定义可以在小型、中型、宽、超宽设备上呈现，但不适用于能在超小型.col-sx上呈现）。
  • 用户不需要自行定义网格，可以直接使用系统预定义的栅格类（如.col-4）或采用Sass mixins来进行更多的语义标记满足开发需要。

BootStrap3栅格系统和BootStrap4栅格系统的区别

bootstrap4它的源码是采用 Sass 语言编写的

使用flex的布局方式

全部使用了rem为单位（除了部分的margin和padding使用px）

Bootstrap 4 共有5种栅格类，依次是特小(col-)、小(col-sm-)、中(col-md-)、大(col-lg-)、特大(col-xl-)

偏移列通过 offset- 类来设置，例如：.offset-md-4 是把.col-md-4 往右移了四列格。

bootstrap3使用float的布局方式

bootstrap3 共有4种栅格类，依次是特小(col-xs-)、小(col-sm-)、中(col-md-)、大(col-lg-)

bootstrap3里面使用push和pull向左和向右移动

栅格选项

Bootstrap使用ems或rems来定义大多数属性的规格大小、px用于全局层面网格断点和容器宽度（因为浏览器和设备的宽度是以像素px为单位，且不会随字体大小而变化）。

通过一个简单的表格查看Bootstrap的网格系统在各种屏幕和设备上的细节约定：

1.3 栅格系统常用属性

利用栅格断点特性进行排版，可以简化列的大小，而不需要批定显式的列宽，如强制写为：.col-sm-6。

自动布局列

等宽布局

下面的列子，展示了一行两列与一行三列的布局，从xs（如上表如见，实际上并不存在xs这个空间命名，是以.col表示，下同不再注）到xl（即.col-xl-*）所有设备上都是等宽并占满一行，只要简单的应用.col就可以完成。

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

等宽列可以分成多行,下面是等宽列两行的处理方法，引用w-100进行切割分行：

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

设置一列宽度

在Flexbox的布局上，拥有很多现代特征，比如自动布局和列宽处理。你可以在一行多列的情况下，特别指定一列并进行宽度定义，同时其它列自动调整大小，可以使用预定义的栅格类（如下所示），从而实行栅格宽或行宽的优化处理。注意在这种民琣上，无论中心定义列的宽度如何，其他列都将调整大小。

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (更宽-12格中占6格，其它6格另外两列平分)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

可变宽度的弹性空间

使用 col-{breakpoint}-auto 断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

覆盖所有设备

如果要一次性定义从最小设备到最大设备相同的网格系统布局表现，请使用.col和.col-*类。后者是用于指定特定大小的(如.col-6)，否则使用.col就可以了。

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

水平堆砌

使用单一的.col-sm-*类方法，可以创建一个基本的网格系统，此时如果没有指定其它媒体查询断点宽度，这个栅格系统是成立的，而且会随着屏幕变窄成为超小屏幕.col-后，自动成为每列一行、水平堆砌。改变网页屏幕宽度你可以在下面列子看到效果：

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

混合布局

设计师们当然不会简单的把各个屏幕下的栅格都做成一样，那将是单调乏味的，所以你可以根据需要对每一个列进行不同的设备定义。下方示例展示了原理：

<!-- 定义在超小屏幕下1列全宽、1列半宽，而其它场景以8:4比例并行排列 -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

1.4 BootStrap内容之排版

初始化与CSS重置

Bootstrap致力于提供一个简洁、优雅的的基础，以此作为立足点。我们使用Reboot，把一系列元素特征的CSS修改放在一个文件里。参考官网文档了解这些知识

CSS选择器也支持以.h1 -- .h6 方式引用，这样可以使字体样式呈现出标题效果，不同是引用.h1 -- .h6的文本段不会视作HTML的标题元素（往往SEO、读屏器和机器识别时对此很敏感-译者注），效果如下：

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

自定义标题备注

使用附带的实用类从Bootstrap 重新创建小的辅助标题文本，如下所示：

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

显式标题

bootstrap可以传统的标题元素设计得更漂亮，以迎合你的网页内容。如果你想要一个标题醒目，考虑使用显示标题——一种更大型、鲜明的标题样式，则可以用下面方法：

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

文本内联元素

HTML5 文本元素的常用内联表现方法也适用于BootStrap4。

<p>You can use the mark tag to <mark>highlightmark> text.p>
<p><del>This line of text is meant to be treated as deleted text.del>p>
<p><s>This line of text is meant to be treated as no longer accurate.s>p>
<p><ins>This line of text is meant to be treated as an addition to the document.ins>p>
<p><u>This line of text will render as underlinedu>p>
<p><small>This line of text is meant to be treated as fine print.small>p>
<p><strong>This line rendered as bold text.strong>p>
<p><em>This line rendered as italicized text.em>p>

Blockquote 来源备注与引用

引用文档中另一个来源的内容块，，请在一段HTML外面包裹 <blockquote class="blockquote">，作为引用。为了显示直接引用，我们推荐使用p作为子级包裹容器，这在 HTML 规范中也有多个变通方法，下面逐一讲解。

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.p>
blockquote>

底部备注来源

相关文章