对Bootstrap的css基础样式进⾏总结归纳
概览
这篇博⽂是对bootstrap官⽅⽂档的总结，为什么我要对它进⾏总结呢？哈哈，有两个原因，第⼀，我想复习⼀下bootstrap框架的知识，第⼆，我有点不适应官⽅⽂档说的繁琐，冗余。我想⾃⼰做⼀份简单明了的⽂档。毕竟⾃⼰以前学过，但是，如果有⼩⽩，对这篇⽂章看的不太懂，请去官⽅⽂档查看，这是链接：。
深⼊了解 Bootstrap 底层结构的关键部分，会让我们让web 开发变得更好、更快、更强壮。
HTML5 ⽂档类型
Bootstrap 使⽤到的某些 HTML 元素和 CSS 属性需要将页⾯设置为 HTML5 ⽂档类型。在你项⽬中的每个页⾯都要参照下⾯的格式进⾏设置。
<!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">
<title>Title Page</title>
<!-- jQuery 必须在Bootstrap JavaScript导⼊之前，因为bootstrap依赖jquery -->
<script src="leapis/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="maxcdn.bootstrapcdn/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap CSS -->
<link href="maxcdn.bootstrapcdn/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">
</head>
.
..
</html>
屏幕⾃适应
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
<meta name="viewport"content="width=device-width, initial-scale=1">
在移动设备浏览器上，通过为视⼝（viewport）设置 meta 属性为 user-scalable=no 可以禁⽤其缩放（zooming）功能。这样禁⽤缩放功能后，⽤户只能滚动屏幕，就能让你的⽹站看上去更像原⽣应⽤的感觉。注意，这种⽅式我们并不推荐所有⽹站使⽤，还是要看你⾃⼰的情况⽽定！
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
默认全局样式
Bootstrap 排版、链接样式设置了基本的全局样式。分别是：
为 body 元素设置 background-color: #fff;
使⽤ @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数。
为所有链接设置了基本颜⾊ @link-color ，并且当链接处于 :hover 状态时才添加下划线。
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p>（段落）元素还被设置了等于 1/2 ⾏⾼（即 10px）的底部外边距（margin）。
栅格系统
Bootstrap 提供了⼀套响应式、移动设备优先的流式栅格系统，随着屏幕或视⼝（viewport）尺⼨的增加，系统会⾃动分为最多12列。布局容器
Bootstrap 需要为页⾯内容和栅格系统包裹⼀个 .container 容器。我们提供了两个作此⽤处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类⽤于固定宽度并⽀持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类⽤于 100% 宽度，占据全部视⼝（viewport）的容器。
<div class="container-fluid">
...
</div>
布局规范
栅格系统⽤于通过⼀系列的⾏（row）与列（column）的组合来创建页⾯布局，你的内容就可以放⼊这些创建好的布局中。下⾯就介绍⼀下 Bootstrap 栅格系统的⼯作原理：
“⾏（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中。
通过“⾏（row）”在⽔平⽅向创建⼀组“列（column）”。
**你的内容应当放置于“列（column）”内，**并且，只有“列（column）”可以作为⾏（row）”的直接⼦元素。
通过为“列（column）”设置 padding 属性，从⽽创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从⽽抵消掉为 .container 元素设置的 padding，也就间接为“⾏（row）”所包含的“列（column）”抵消掉了padding。
栅格系统中的列是通过指定1到12的值来表⽰其跨越的范围。例如，三个等宽的列可以使⽤三个 .col-xs-4 来创建。
如果⼀“⾏（row）”中包含了的“列（column）”⼤于 12，多余的“列（column）”所在的元素将被作为⼀个整体另起⼀⾏排列。
栅格参数
超⼩屏幕 ⼿机(<768px)⼩屏幕 平板 (≥768px)
中等屏幕 桌⾯显⽰器
bootstrap项目(≥992px)
⼤屏幕 ⼤桌⾯显⽰器
(≥1200px)
栅格系统⾏为总是⽔平排列开始是堆叠在⼀起的，当⼤于这些阈值时将变为⽔平排列C
.container 最⼤
宽度
None （⾃动）750px970px1170px 类前缀.l-lg-
列（column）
数
12
最⼤列
（column）宽
⾃动~62px~81px~97px
槽（gutter）宽30px （每列左右均有15px）
可嵌套是
偏移
（Offsets）
是
列排序是
关系实例
所有“列（column）必须放在 ” .row 内，你写的内容放在column⾥⾯。
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<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>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
⼿机、平板、桌⾯不同布局
通过添加多个类，可以使⽹页在⼿机，平板，桌⾯实现不同类型的布局效果。
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
响应式列重置
在不同的屏幕上，可能会导致某些列可能会出现⽐别的列⾼的情况（⽂本内容多）。为了克服这⼀问题，建议联合使⽤ .clearfix 和 响应式⼯具类。
<div class="row">
<div class="col-xs-6 col-sm-3">我在⼩屏幕中的列变⾼了</div>
<div class="col-xs-6 col-sm-3">我的列低</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
列偏移
使⽤ .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>
嵌套列
为了使⽤内置的栅格系统将内容再次嵌套，可以通过添加⼀个新的 .row 元素和⼀系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。
<div class="col-sm-9">
第⼀层内容
<div class="row">
<div class="col-xs-8 col-sm-6">
第⼆层内容
</div>
<div class="col-xs-4 col-sm-6">
第⼆层内容
</div>
</div>
</div>
</div>
列排序
通过使⽤ .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>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
⽂本样式
标题
HTML 中的所有标题标签，<h1> 到 <h6> 均可使⽤。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的⽂本赋予标题的样式。
h1. Bootstrap heading Semibold 36px
h2. Bootstrap heading Semibold 30px
h3. Bootstrap heading Semibold 24px
h4. Bootstrap heading Semibold 18px
h5. Bootstrap heading Semibold 14px
h6. Bootstrap heading Semibold 12px
<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>
副标题
在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以⽤来标记副标题。
h1. Bootstrap heading Secondary text
h2. Bootstrap heading Secondary text
h3. Bootstrap heading Secondary text
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
内联⽂本元素
添加⾼亮
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
被删除的⽂本
对于被删除的⽂本使⽤ <del> 标签。
This line of text is meant to be treated as deleted text.
<del>This line of text is meant to be treated as deleted text.</del>
⽆⽤⽂本
对于没⽤的⽂本使⽤ <s> 标签。
This line of text is meant to be treated as deleted text.
<s>This line of text is meant to be treated as no longer accurate.</s>
插⼊⽂本
额外插⼊的⽂本使⽤ <ins> 标签。
This line of text is meant to be treated as an addition to the document.
<ins>This line of text is meant to be treated as an addition to the document.</ins>
带下划线的⽂本
为⽂本添加下划线，使⽤ <u> 标签。
This line of text will render as underlined
<u>This line of text will render as underlined</u>
⼩号⽂本
对于不需要强调的inline或block类型的⽂本，使⽤ <small> 标签包裹，其内的⽂本将被设置为⽗容器字体⼤⼩的 85%。标题元素中嵌套的<small> 元素被设置不同的 font-size 。
你还可以为⾏内元素赋予 .small 类以代替任何 <small> 元素。
<small>This line of text is meant to be treated as fine print.</small>
着重
通过<strong>强调⼀段⽂本。
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>
斜体
⽤<em>斜体强调⼀段⽂本。
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>
⽂本对齐
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论