bootstrap系列文集

一、概要

Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用

Bootstrap 中把一些标签的样式重置了，也即是为一些标签设置了带有 Bootstrap 风格的样式，如 h 标签，p 标签等等，这其中包含了 HTML5 标签

二、页面主体

1、概要

Bootstrap 将全局 font-size设置为14px，line-height 行高设置为 20px；<p>段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333等。

2、标题、内联子标题

1. 说明
   Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式 向任何标题添加一个内联子标题，
   只需要简单地在元素两旁添加 ，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本
2. 示例代码

   <span class="h1">我是标题1 h1: <small>我是副标题1 h1</small></span>
   <span class="h2">我是标题2 h2: <span class="small">我是副标题2 h2</small></span>
   <span class="h3">我是标题3 h3:<small>我是副标题3 h3</small></span>
   <span class="h4">我是标题4 h4: <small>我是副标题4 h4</small></span>
   <span class="h5">我是标题5 h5: <small>我是副标题5 h5</small></span>
   <span class="h6">我是标题6 h6: <small>我是副标题6 h6</small></span>
   

3. 备注
   为了保证了统一性字体颜色、字体样式、行高均被固定了。而原生的会根据系统内置的首选字体决定，颜色是最黑色。

3、内联文本元素

1. 添加标记(<mark>元素或.mark 类)

   <p>abc<mark>标志突出</mark></p>
   

2. 线条的文本

   <del>删除的文本</del>
   <s>无用的文本</s>
   <ins>插入的文本</ins>
   <u>下划线文本</u>
   

3. 强调文本

   <small>标准字体大小的85%</small>
   <strong>字体加粗-700</strong>
   <em>字体倾斜倾斜</em>
   

4、其它

1. 设置英文文本大小写

     <p class="text-lowercase">BOOTsTRAP小写</p>
      <p class="text-uppercase">bootstrap 大写</p>
      <p class="text-capitalize">bootstrap 首字母大写</p>
   

2. 地址文本

   <!-- 网页上显示联系信息 -->
   <address>
     <strong>admin</strong><br>
     <a href="mailto:#">123456@qq.com.com</a>
   </address>
   

3. 引用

   <blockquote>引用内容</blockquote>
   

5、列表排版

1. 移除默认样式的

   <ul class="list-unstyled">
   　　<li>Bootstrap 框架</li>
   　　<li>Bootstrap 框架</li>
   　　<li>Bootstrap 框架</li>
   　　<li>Bootstrap 框架</li>
   　　<li>Bootstrap 框架</li>
   </ul>
   

2. 内联样式排版

   <ul class="list-inline">
   　　<li>Bootstrap 框架</li>
   　　<li>Bootstrap 框架</li>
   　　<li>Bootstrap 框架</li>
   　　<li>Bootstrap 框架</li>
   　　<li>Bootstrap 框架</li>
   </ul>
   

3. 水平样式排版

   <dl class="dl-horizontal">
       <dt>购物指南</dt>
       <dd>免费注册</dd>
   </dl>
   

三、文本样式

1、属性介绍

1. text-left
   向左对齐文本
2. text-center
   居中对齐文本
3. text-right
   向右对齐文本
4. text-primary
   本行内容带有一个 主要蓝
5. text-success
   本行内容带有一个 成功绿
6. text-info
   本行内容带有一个 信息蓝
7. text-warning
   本行内容带有一个 警告黄
8. text-danger
   本行内容带有一个 危险红

2、举个栗子

<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-primary">本行内容带有一个 主要蓝</p>
<p class="text-success">本行内容带有一个 成功绿</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

四、其它辅助类

1、左右浮动

1. 说明
   通过添加一个类，可以将任意元素向左或向右浮动
2. 举个栗子

   <div class="pull-left">左浮动</div>
   <div class="pull-right">右浮动</div>
   

2、清除浮动

1. 说明
   通过为父元素添加 .clearfix 类可以很容易地清除浮动
2. 举个栗子

   <div class="clearfix">
       <p class='pull-left'>浮动元素</p>
       <p class='pull-left'>浮动元素</p>
   </div>
   

3、内容块居中

1. 说明
   任意块级元素内容左右居中,注意设置一下宽度 主要通过 margin:x auto；并且设置了 display:block;。
2. 举个栗子

   <div class="container">
       <div class="center-block text-center" style="width: 50%; background: red">
           <p>内容居中</p>
       </div>
   </div>
   

4、显示或隐藏内容

1. 说明
   通过.show 和 .hidden 类可以让任意元素显示或隐藏
2. 举个栗子

   <div class="show">显示</div>
   <div class="hidden">隐藏</div>
   

5、三角符号

1. 说明
   显示向下或者向上的三角形符号
2. 举个栗子

   <span class="caret"></span>
   

6、关闭按钮

1. 说明
   通过使用一个象征关闭的图标，可以让模态框和警告框消失。
2. 举个栗子

   <button type="button" class="close">
       <span aria-hidden="true">&times;</span>
   </button>