bootstrap样式库

胥和悌

2023-12-01

一、什么是bootstrap

Bootstrap是一个基于HTML、CSS、JavaScript的前端开发框架，它简洁灵活，使得Web开发更加快捷。
Bootstrap插件全部依赖jQuery，而bootstrap框架主要为我们提供两个最重要的文件：bootstrap.min.css和bootstrap.min.js。

二、如何使用
下载：http://www.bootcss.com/
导入jQuery.js文件
导入bootstrap.css文件
导入bootstrap.js文件
将所有内容放到布局容器中

三、布局容器

 //Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。
 //此处的类有两个作用。
 //.container 类用于固定宽度并支持响应式布局的容器。
		<div class="container">
			...
		</div>
//.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
		<div class="container-fluid">
			...
		</div>
 //注意：由于 padding 等属性的原因，这两种容器类不能互相嵌套。

四、栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。

1、Bootstrap 栅格系统的工作原理：

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

2、栅格参数：

* 超小屏幕 手机（<768px）：.col-xs-
* 小屏幕 平板（≥768px）：.col-sm-
* 中等屏幕 桌面显示器（≥992px）：.col-md-
* 大屏幕 大桌面显示器（≥1200px）：.col-lg-

示例：

//注释的括号中的数值为所占栅格系统的列数
//超小屏幕，十二栏（都是1）
<div class="row">
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
</div>

//小屏幕，两栏（8，4）
<div class="row">
	<div class="col-md-8">.col-md-8</div>
	<div class="col-md-4">.col-md-4</div>
</div>

//中等屏幕，三栏（4，4，4）
<div class="row">
	<div class="col-md-4">.col-md-4</div>
	<div class="col-md-4">.col-md-4</div>
	<div class="col-md-4">.col-md-4</div>
</div>

//大屏幕，两栏（6，6）
<div class="row">
	<div class="col-md-6">.col-md-6</div>
	<div class="col-md-6">.col-md-6</div>
</div>

3、列偏移：

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

示例：

//.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
<div class="row">
	<div class="col-md-4">.col-md-4</div>
	<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
	<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
	<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
	<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

4、嵌套列：

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

示例：

<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>

5、列排序

//通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
<div class="row">
	<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>//从左往右推3列
	<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>//从左往右拉9列
</div>

五、全局CSS样式

1、标题

* HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。
* 另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
* 在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
	* <h1>标题 <small>副标题</small></h1>

2、页面主体

* Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。
* 另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
* 中心内容
	* 通过添加 .lead 类可以让段落突出显示。

3、内联文本元素

* 标记文本：<mark></mark>
* 被删除的文本：<del></del>
* 无用文本：<s></s>
* 插入文本：<ins></ins>
* 带下划线的文本：<u></u>
* 小号文本：<small></small>
* 着重：<strong></strong>
* 斜体：<em></em>

4、对齐

//通过文本对齐类，可以简单方便的将文字重新对齐。
* class="text-left"
* class="text-center"
* class="text-right"
* class="text-justify"
* class="text-nowrap"

5、改变文本的大小写

* class="text-lowercase"
* class="text-uppercase"
* class="text-capitalize"

6、缩略语

* 当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。
* 缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。
* 如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。

* 基本缩略语
	* <abbr title="attribute">attr</abbr>
* 首字母缩略语
	* <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

六、一些重要的设置
1. HTML5 doctype

Bootstrap 要求设置 HTML5 doctype，也就是.html文件需要使用HTML5的声明。如果没有这个设置，你会看到一些奇怪的、不完整的样式，但是只要添加了这个设置就不会出现任何错误了。

<!doctype html>
<html lang="en">
  ...
</html>

lang属性可以不用添加。

2. 响应式meta标签

Bootstrap 本着移动设备优先的策略开发的，按照这一策略，我们优先为移动设备优化代码，然后根据每个组件的情况并利用 CSS 媒体查询（CSS media queries）技术为组件设置合适的样式。为了确保在所有设备上能够正确渲染并支持触控缩放，务必将设置 viewport 属性的 meta 标签添加到中。如下所示。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

3. 盒模型
bootstrap框架内部已经将全局的 box-sizing 值从默认的 content-box 修改为 border-box。这就确保了 padding 不会影响元素最终的宽度计算，但是这可能会导致第三方组件出现问题，例如 Google 地图和 Google 定制搜索。

所以有的时候需要手动设置回默认值去。怎么设置呢？看下面代码：

.selector-for-some-widget {
  box-sizing: content-box;
}

关于box-sizing属性的值，我们可以参考文章：css的两种盒模型

4. Reboot

为了改善跨浏览器的渲染，我们使用 Reboot 修正跨浏览器和设备之间的不一致性，同时对常用的 HTML 元素设置统一的效果。

bootstrap4.2.1官方文档：https://getbootstrap.com/docs/4.2/getting-started/introduction/

bootstrap4.x通用的中文文档：https://v4.bootcss.com/docs/4.0/getting-started/introduction/

bootstrap中文文档：https://www.bootcss.com/

bootstrap样式库

相关阅读

相关文章

相关问答

相关文档