01_Bootstrap基础组件01

2023-09-20 14:51:01

1 什么是 Bootstrap?

Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使 Web 开发更加快捷。它对 HTML、CSS 和 JavaScript 进行了封装,使它们使用起来更方便。我们只需要使用它已经设定好的类,或规则,即可快速应用它提供的功能。

Bootstrap 使用了一些 HTML5 元素和 CSS3 属性(如媒体查询)。为了让这些正常工作,需要使用 HTML5 文档类型。如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),可能会面临一些浏览器显示不一致的问题。

2 怎么使用 Bootstrap

2.1 进入官网

http://www.bootcss.com/ 点击bootstrap3中文文档,点击下载bootstrap3。

2.2 下载 Bootstrap

点击 用于生产环境的Bootstrap 下面的 下载Bootstrap 按钮。

下载完后它有三个文件夹 css,fonts,js

2.3 引入 BootStrap

<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="./plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css" />

<!-- jquery.min.js 和 bootstrap.min.js 要放在body的最底部 -->
<!-- 为了确保页面加载正常,以及加载速度 -->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="./plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

2.4 文档类型声明

<!Doctype html>

Bootstrap 用到了 HTML5,所以使用 Bootstrap 时需要包含html5 版本的DOCTYPE。

2.5 meta 标签设置

Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。

因为现在越来越多的用户使用移动设备,为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下,建议将此标签加入到 head 部分

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2.6 Bootstrap 模板

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="../../resource/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css">
  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
  <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
  <!--[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]-->
</head>

<body>
  <div class="container">
    <h1>你好,世界!</h1>
  </div>


  <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Bootstrap 核心 JavaScript 文件 -->
  <script src="../../resource/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>

</html>

2.7 Bootstrap 版本区别

Bootstrap3 和 Bootstrap4 区别

不同点Bootstrap3Bootstrap4
编写语言Less 语言编写Sass 语言编写
栅格类型4 种栅格类5 种栅格类
单位尺寸使用 px 为单位使用 rem 和 em 为单位(除部分 margin 和 padding 使用px)
移动方式使用 push 和 pull 向左右移动偏移列通过 offset- 类设置
布局方式使用 float 的布局方式选择弹性盒模型(flexbox)

注:Bootstrap3 的 4 种栅格:

  • 特小(col-xs-) 适配手机(<768px)
  • 小(col-sm-) 适配平板(≥768px)
  • 中(col-md-) 适配电脑(≥992px)
  • 大(col-lg-) 适配宽屏电脑(≥1200px)

Bootstrap4 的 5 种栅格:

  • 特小(col-)(<576px)
  • 小(col-sm-)(≥576px)
  • 中(col-md-)(≥768px)
  • 大(col-lg-) (≥992px)
  • 特大(col-xl-)(≥1200px)

Bootstrap4 特点

  • 新增网格层适配了移动端
  • 全面引入 ES6 新特性(重写所有 JavaScript 插件)
  • css 文件减少了至少 40%
  • 所有文档都用 Markdown 编辑器重写
  • 放弃对 IE8 的支持

3 布局容器

Bootstrap 中用于布局的有 .container.container-fluid

  • .container 类用于固定宽度并支持响应式布局的容器。
  • .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

注意:由于 padding 等属性的原因,这两种容器类不能互相嵌套。

<div class="container">
    我是固定宽度内容
</div>

<div class="container-fluid">
    我是全屏显示内容
</div>

4 栅格系统

栅格系统,也可称之为“网格系统”,运用固定的格子设计版面布局,其风格工整简洁。在网页当中,是指以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。

对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。

4.1 简介

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

4.2 用法

1、行 .row 必须包含在容器 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便其赋予合适的对齐方式和内间距(padding)

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

2、在行 .row 中可以添加列 .column,但列数之和不能超过平分的总列数 12,如果 .row 中包含的 .column 大于 12,多余的 .column 所在的元素将被作为一个整体另起一行排列

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

3、具体内容应当放在列容器 .column 之内,而且只有列 .column 才可以作为行容器 .row 的直接子元素

4、通过设置内间距(padding)从而创建列与列之间的间距,然后通过为第一列和最后一叠设置负值的外距(margin)来抵消内距(padding)的影响

4.3 原理

在栅格系统中,使用以下媒体查询(@media)来创建关键的分界点阈值。

/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */

/* 小屏幕(平板,大于等于 768px) */
@media (min-width: 768px) { ... }

/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: 992px) { ... }

/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: 1200px) { ... }

4.4 栅格参数

星号的取值是数值(比如1、2),一行的总列数都是 12

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

4.5 基础用法

使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统。所有 .column 必须放在 .row 内。

p {
    padding: 50px;
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    background: #f2f2f2;
}
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <p>Box 1</p>
        </div>
        <div class="col-md-4">
            <p>Box 2</p>
        </div>
        <div class="col-md-4">
            <p>Box 3</p>
        </div>
    </div>
</div>

4.6 响应式

想要实现在手机屏幕显示2等分,平板显示4等分,电脑显示6等分,也就是实现响应式的网站

<div class="row">
    <div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div>
    <div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div>
    <div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div>
    <div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div>
    <div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div>
    <div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div>
</div>

Bootstrap 在超小屏幕中,会查找带有 col-xs-* 的类,在小屏幕设备中,会查找带有 col-sm-* 的类,在中等屏幕设备中,会查找带有 col-md-* 的类,并使用它们。

在某些阈值时,某些列可能会出现比别的列高的情况。为了克服这一问题,建议联合使用 .clearfix

visible-*-block (星号代表屏幕的大小)在某个阈值下显示,可以为 xs、sm、md、lg

<div class="row">
    <div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2 col-xs-6 col-sm-3 col-md-2</div>
    <div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div>
    <div class="clearfix visible-sm-block"></div>
    <div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div>
    <div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div>
    <div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div>
</div>

4.7 列偏移

有时候,我们不希望相邻的两个列紧靠在一起,但又不想用margin或者其他技术手段,这是可以用列偏移(offset)来实现。

使用列偏移只需在列元素上添加类名 .col-md-offset-* (星号代表要偏移的列组合数),具有这个类名的列就会偏移,如:在列元素上添加 .col-md-offset-4,表示该列向右偏移4个列的宽度

<div class="container">
    <div class="row">
        <div class="col-md-4">1111</div>
        <div class="col-md-4 col-md-offset-2">111</div>
        <div class="col-md-2">333</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-4">列偏移</div>
        <div class="col-md-2">col-md-2</div>
        <div class="col-md-2">col-md-2</div>
    </div>
</div>

利用十二分之一的margin-left,有多少个offset,就有多少个margin-left

.col-md-offset-12 {
    margin-left: 100%;
}
.col-md-offset-11 {
    margin-left: 91.66666667%;
}
.col-md-offset-10 {
    margin-left: 83.33333333%;
}
.col-md-offset-9 {
    margin-left: 75%;
}
.col-md-offset-8 {
    margin-left: 66.66666667%;
}
.col-md-offset-7 {
    margin-left: 58.33333333%;
}
.col-md-offset-6 {
    margin-left: 50%;
}
.col-md-offset-5 {
    margin-left: 41.66666667%;
}
.col-md-offset-4 {
    margin-left: 33.33333333%;
}
.col-md-offset-3 {
    margin-left: 25%;
}
.col-md-offset-2 {
    margin-left: 16.66666667%;
}
.col-md-offset-1 {
    margin-left: 8.33333333%;
}
.col-md-offset-0 {
    margin-left: 0;
}

要注意的是,使用col-md-offset-* 对列进行右偏移时,要保证列与偏移列的总数不超过12,不然会导致列断行显示。

4.8 列排序

列排序就是改变列的方向,并且设置浮动的距离。在 Bootstrap 网格系统中是通过添加类名。col-md-push-*col-md-pull-*

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

col-md-4 居左,col-md-8 居右,如果要互换位置,就需要将 col-md-4 向右移动8个列的距离,也就是添加类名 .col-md-push-8 同时需要将 col-md-8 向左移动 4 个列的距离,也就是添加类名 .col-md-pull-4 Bootstrap 仅通过设置 left 和 right 来实现定位效果。

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-push-8">col-md-4</div>
        <div class="col-md-8 col-md-pull-4">col-md-8</div>
    </div>
</div>
.col-md-pull-12 {
    right: 100%;
}
.col-md-pull-11 {
    right: 91.66666667%;
}
.col-md-pull-10 {
    right: 83.33333333%;
}
.col-md-pull-9 {
    right: 75%;
}
.col-md-pull-8 {
    right: 66.66666667%;
}
.col-md-pull-7 {
    right: 58.33333333%;
}
.col-md-pull-6 {
    right: 50%;
}
.col-md-pull-5 {
    right: 41.66666667%;
}
.col-md-pull-4 {
    right: 33.33333333%;
}
.col-md-pull-3 {
    right: 25%;
}
.col-md-pull-2 {
    right: 16.66666667%;
}
.col-md-pull-1 {
    right: 8.33333333%;
}
.col-md-pull-0 {
    right: 0;
}

.col-md-push-12 {
    left: 100%;
}
.col-md-push-11 {
    left: 91.66666667%;
}
.col-md-push-10 {
    left: 83.33333333%;
}
.col-md-push-9 {
    left: 75%;
}
.col-md-push-8 {
    left: 66.66666667%;
}
.col-md-push-7 {
    left: 58.33333333%;
}
.col-md-push-6 {
    left: 50%;
}
.col-md-push-5 {
    left: 41.66666667%;
}
.col-md-push-4 {
    left: 33.33333333%;
}
.col-md-push-3 {
    left: 25%;
}
.col-md-push-2 {
    left: 16.66666667%;
}
.col-md-push-1 {
    left: 8.33333333%;
}
.col-md-push-0 {
    left: 0;
}

4.9 列嵌套

列嵌套可以在一个列中添加一个或数个行(row)容器,然后在这个行容器中插入列,在列容器中的行容器(row),宽度为100%时,就是当前外部列的宽度,被嵌套的行(row)所包含的列(column)的个数不能超过12。

<div class="container">
    <div class="row">
        <div class="col-md-8">
            我是 col-md-8,我里面嵌套了一个行
            <div class="row">
                <div class="col-md-6">col-md-6</div>
                <div class="col-md-6">col-md-6</div>
            </div>
        </div>
        <div class="col-md-4">col-md-4</div>
    </div>
</div>

4.10 删除间距

如果想要每一列之前的间距为 0,可以通过 .row-no-gutters 这一属性删除当前行内所有列的间距值

<div class="row row-no-gutters">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
    <div class="col-xs-6">.col-xs-6</div>
    <div class="col-xs-6">.col-xs-6</div>
</div>
更多推荐

Tomcat调优【精简版】

Tomcat调优优化Tomcat内存分配调整Tomcat启动脚本contalina.sh,设置tomcat启动时分配的内存很可使用的最大内存;CATALINA_OPTS调整Tomcat线程池Tomcat默认使用的线程池:ThreadPoolExecutor可以通过修改server.xml的Connector节点下的ma

在Android Studio中,如何通过CMake 配置文件来实现多个动态依赖库的编译?

在AndroidStudio中,如何通过CMake配置文件来实现多个动态依赖库的编译?Author:LycanNote:以下问题解答通过大模型生成,主要用于个人学习和备忘,仅供参考,若有错误或者侵权,请联系我修正,谢谢。问题在AndroidStudio中,如何通过CMake配置文件来实现多个动态依赖库的编译?请一步一步

离散高斯抽样(Discrete Gaussian Sampling)

离散高斯抽样离散高斯抽样(DiscreteGaussianSampling)是一种常见于密码学和数学领域的随机采样方法。它通常用于构建基于格(lattice)的密码学方案,如基于格的加密和数字签名。DiscreteGaussianSampling的主要目的是从一个离散的集合中随机选择元素,同时遵循高斯分布(Gaussi

C# 随机数生成 Mersenne Twister 马特赛特旋转演算法 梅森旋转算法

NuGet安装MathNet.Numerics引用:usingMathNet.Numerics.Random;///<summary>///包括lower,不包括upper///</summary>///<paramname="lower"></param>///<paramname="upper"></param>/

vue3 的CreateApp

🎬岸边的风:个人主页🔥个人专栏:《VUE》《javaScript》⛺️生活的理想,就是为了理想的生活!目录从一个例子开始从一个例子开始constHelloVueApp={data(){return{message:'HelloVue!'}}}Vue.createApp(HelloVueApp).mount('#he

【Acorn】JS解析器编译原理

Acorn是什么?Acorn是一个用JavaScript编写的解析器,专门用于将源代码解析为抽象语法树(AbstractSyntaxTree,AST)。它是一个轻量级、高性能的解析器,被广泛应用于许多JavaScript工具和框架中。Acorn的整体工作流程输入源代码(InputSourceCode):接收JavaSc

虚拟列表 - Vue3实现一个可动态改变高度的虚拟滚动列表

虚拟列表-Vue3实现一个可动态改变高度的虚拟滚动列表前言在开发中经常遇到大量的渲染列表数据问题,往往我们就只是简单地遍历渲染,没有过多地去关注是否会存在性能问题,这导致如果数据量较大的时候,比如上万条数据,将会在dom中渲染上万个节点,这将加大浏览器的开销,可能会导致页面卡顿,加载慢等性能问题。因此,在渲染大量数据时

长安链上线可视化敏捷测试工具v1.0版本

开发者对区块链底层平台进行初步的了解后,一项经常会涉及到的工作是对平台进行测试以考量其性能及稳定性是否符合自身使用需求。长安链推出了可视化UI操作界面的区块链敏捷测试工具v1.0版本,当前版本可对内置合约进行压测并生成网络拓扑图以验证组网方式。图1区块链性能测评平台是基于长安链2.3.0版本实现,用户在前端页面选择输入

计算机毕设项目之基于springboot+vue+mysql的大学生就业服务平台的设计与实现(内含源码+文档+教程)

博主介绍:✌全网粉丝10W+,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业毕业设计项目实战6年之久,选择我们就是选择放心、选择安心毕业✌🍅由于篇幅限制,想要获取完整文章或者源码,或者代做,拉到文章底部即可看到个人VX。🍅2023年-2024年最新计算机毕业设计本科选题大全汇总感兴趣的可以先收藏

简单介绍十款可以免费使用的API测试工具

API开发应该是后端开发最常见的工作,而调试和测试API是非常关键的,这篇文章简单介绍几款常用的工具以供大家参考。SoapUISoapUI是很老牌的工具的,在之前Webservice盛行的时候经常会用到。现在官方推出了Pro版本的ReadyAPI,但要收费,它功能更强大,但是太贵了。PostmanPostman是一款很

解锁汽车自动驾驶的密码:L0到L5六个等级全解析

引言随着智能网联汽车技术的快速发展,自动驾驶已成为汽车产业发展的重要方向。根据国际公认的标准,汽车自动驾驶可分为六个等级:L0级到L5级,等级越高意味着自动化程度越高。那么这六个等级具体有何区别呢?本文将详细介绍汽车自动驾驶的六个等级标准。自动驾驶的6个等级(L0-L5)L0级是完全的手动驾驶,驾驶员要完成汽车的全部操

热文推荐