Bootstrap简介

什么是Bootstrap？

bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。

Bootstrap官网：Bootstrap 4 概览_Bootstrap中文网

标题类

在HTML中，可以使用不同的标签来定义不同的文本样式，例如文字的大小、粗体、删除线等。Bootstrap通过覆写元素的默认样式，实现对页面布局的优化，让页面在用户面前呈现得更加美观。

在浏览网页时最先关注的就是文章的标题，Bootstrap和普通的HTML页面一样，都是使用<h1>到<h6>标签来定义标题。同时Bootstrap还提供了一系列display类来设置标题样式。
设置标题

在Bootstrap中对<h1>到<h6>标签默认样式进行了覆盖。需要注意的是，元素的样式会随着浏览器的修改而进行变动的，可以使元素在不同的浏览器下显示一样的效果。

栅格系统
栅格系统(Grid Systems)，即网格系统，它是一种清晰、工整的设计风格，用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上，一个印刷版面上划分了若干个格子，非常方便排版。

后来，棚格系统被应用于网页布局中，使用响应式栅格系统进行页面布局时，可以让一个网页在不同大小的屏幕上，呈现出不同的结构。

例如~在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏

栅格系统的行和列

Bootstrap栅格系统是指将页面布局划分为等宽的列。随着屏幕或视口尺寸的增加，系统会自动分为1~12列。

栅格系统用于通过一系列的行（row)与列(column）的组合来创建页面布局。

开发者可以将内容放入这些创建好的布局中，然后通过列数的定义来模块化页面布局。

栅格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器)尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。

栅格系统的基本使用方式

1.Bootstrap棚格系统为不同屏幕宽度定义了不同的类,直接为元素添加类名即可。

2.行必须包含在布局容器中，以便为其赋予合适的排列和内补。

3.通过行可以在水平方向创建一组列并且只有列可以作为行的直接子元素。

4.行使用样式.row，列使用样式.col--，内容应当放置于列内，列大于12时，将会另起一行排列。

组件
组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在—起就构成了组件，通过组件可以为用户提供某些特定的功能。

组件是构成页面中独立结构单元，是对结构的抽象，它主要以页面结构形式存在，可复用性很强。组件的使用并不复杂，每个组件拥有自己的作用域，每个组件区域之间独立工作，并且互不影响。组件可以有自己的属性和方法。不同组件之间也具有基本的交互功能，能够根据业务逻辑来实现复杂的项目功能。

特点：

• 组件可以复用，提高开发效率
• 模块化
• 降低代码之间的耦合程度
• 代码更容易维护和管理

Bootstrap标题的具体使用和平时的使用方法是一样的，从一级标题到六级标题，数字越大所代表的级别越小，文本也越小。

<h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

使用display类

如果想要将传统的标题元素设计得更加美观、醒目，来迎合网页内容。这时可以使用Bootstrap中提供的一系列display类来设置标题样式。

<h1 class="display-1">display1</h1>
    <h1 class="display-2">display2</h1>
    <h1 class="display-3">display3</h1>
    <h1 class="display-4">display4</h1>