前端学习之 Bootstrap （一）

中文文档

一、前言

1、简介

Bootsrtap作为一个前端框架，开箱即用，封装了前段开发的大量底层细节，开放灵活，对响应式设计网页很好支持，组件丰富，社区活跃。
特点：

可重用性
一致性
灵活的栅栏布局
定制化
社区活跃
面向未来和开放式开发

2、下载

官网地址

二、预览

1、使用

直接引入
可以直接在HTML文件中引入Bootsrtap

<link href="css/bootsrtap.min.css" rel="styleesheet" media="screen">

Bootstrap CDN：
所谓CDN就是通过一个互联网部署在多个数据中心的大型分布式服务器系统。浏览器可以并行的从CDN下载文件，不需要从自己的服务器下载文件。这些文件不在同一个域中，不会受浏览器的限制（同时只能在一个域下载几个文件）。因此下载时不会一个一个排队。另外CDN会根据用户的位置和更快的路由速度来选择服务器下载文件。
优点：节省带宽，提高网站性能。

<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/版本号/css/bootstrap.min.css">

这也是web性能优化(页面访问)的一个方案

2、移动设备优先

在 Bootstrap 3 中，对移动设备友好的。为了确保适当的绘制和触屏缩放，需要在之中添加 viewport 元数据标签。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。

<head>
    <meta name="viewport"  content="width=device-width, initial-scale=1, max-minum-scale=1, use-scalable=no">
</head>

3、布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类container与container-fluid。但这两种容器类不能互相嵌套
用于固定宽度并支持响应式布局的容器

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

container会使页面给人居中的感觉

.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

.container-fluid给人感觉平铺整个页面的流式布局容器

三、栅格系统

1、简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容就可以放入这些创建好的布局中，更好的实现设计的一致性。
在大屏幕中，栅格最多可以扩大到12列。小屏幕中所有的列都会堆叠起来。由于Bootstrap是移动优先，所以栅格其实是在小屏设备中定义了尺寸，而之一中定义的栅格尺寸也是和中屏设备和大屏设备。
类前缀名：

小尺寸手机屏幕：.col-xs- （分辨率<768px）
平板屏幕：- col-sm- （分辨率(≥768px)）
小尺寸桌面屏幕：-col-md- （分辨率(≥992px)x）
大尺寸屏幕：.col-lg- （分辨率(≥1200px)）
注：为了让网站页面有更好的而可读性，对列间距的宽度为默认30px。即列与列之间的空白区域。

2、不同设备的页面

移动设备和桌面屏幕：使用.col-xs-* 和 .col-md-*

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <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>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <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>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

手机、平板、桌面：使用.col-xs-* 和 .col-md-，.col-sm-

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</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>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

栅栏系统中一行中有十二列，而多出12列，最后一个元素就会换行重新排列。

3、偏移与排列

偏移：在一行中，两个元素占据不同的列数，不同的元素也可以以间距隔开，列向右侧偏移。
列偏移： .col-md-offset-
这些类实际是通过使用 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

列排列： .col-md-push-* 和 .col-md-pull-* 类可以改变列（column）的顺序。
两个元素在一行中前后排列，占据不同的列数，使用列排列类就可以颠倒元素在页面中排列顺序。

三、排版

标题：HTML 中的所有标题标签均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式
页面主题：全局 font-size 设置为 14px，line-height 设置为 1.428。
中心内容：通过添加 .lead 类可以让段落突出显示
内联：mark
删除： del
无用文本：s
插入文本：ins
下划线： u
小号文本：small 默认为标准字体的百分之85
强调文本：strong
斜体：em
高亮：
- b用于高亮单词或短语，不带有任何着重的意味；
- i 标签主要用于发言、技术词汇等
对齐类：
- .text-center 居中
- .text-right 靠右
- .text-left 靠左
字母大小写：
- .text-lowercase
- .text-uppercase
- .text-capitalize

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

四、练习

简单博客格式

1、源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <header class="row">
        <p class="col-md-2 col-md-offset-2"><strong>My Blog</strong></p>
        <p class="col-md-1 col-md-offset-5"><a href="#">登陆</a></p>
        <p class="col-md-1"><a href="#">注册</a></p>
        <p class="col-md-1"><a href="#">退出</a></p>
    </header>
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            <div class="text-center">
                <h2 class="text-capitalize">simple blog form</h2>
            </div>
            <div>
                <div class="col-md-4 col-sm-6 text-lowercase">
                    <p>
                        Maybe I'm foolish maybe I'm blind<br>
                        也许是我太傻，也许是我眼瞎<br>
                        Thinking I can see through this and see what's behind<br>
                        以为我能看穿一切以及背后的真相<br>
                        Got no way to prove it so maybe I'm blind<br>
                        无法证明什么，也许是我被蒙蔽<br>
                        But I'm only human after all I'm only human after all<br>
                        但毕竟我是个凡人，我只是个凡人<br>
                        Don't put your blame on me<br>
                        请别把你的火撒在我身上<br>
                        Don't put your blame on me<br>
                        别把你的火撒在我身上<br>
                        Take a look in the mirror and what do you see<br>
                        看一眼镜中世界，你看到了什么<br>
                        Do you see it clearer or are you deceived in what you believe<br>
                        你洞穿了一切还是被信仰所欺骗？<br>
                        Cos I'm only human after all you're only human after all<br>
                        因为我只是个凡人，你只是个凡人<br>
                    </p>
                </div>
                <div class="col-md-4 col-sm-6 text-uppercase">
                    <p>
                        Maybe I'm foolish maybe I'm blind<br>
                        也许是我太傻，也许是我眼瞎<br>
                        Thinking I can see through this and see what's behind<br>
                        以为我能看穿一切以及背后的真相<br>
                        Got no way to prove it so maybe I'm blind<br>
                        无法证明什么，也许是我被蒙蔽<br>
                        But I'm only human after all I'm only human after all<br>
                        但毕竟我是个凡人，我只是个凡人<br>
                        Don't put your blame on me<br>
                        请别把你的火撒在我身上<br>
                        Don't put your blame on me<br>
                        别把你的火撒在我身上<br>
                        Take a look in the mirror and what do you see<br>
                        看一眼镜中世界，你看到了什么<br>
                        Do you see it clearer or are you deceived in what you believe<br>
                        你洞穿了一切还是被信仰所欺骗？<br>
                        Cos I'm only human after all you're only human after all<br>
                        因为我只是个凡人，你只是个凡人<br>
                    </p>
                    <blockquote class="blockquote-reverse">famous song <cite title="Source Title">Source Title</cite></blockquote>
                </div>
                <div class="col-md-4 col-sm-12">
                    <blockquote title="stay hungry stay foolish">
                        <p>
                            Maybe I'm foolish maybe I'm blind<br>
                            也许是我太傻，也许是我眼瞎<br>
                            Thinking I can see through this and see what's behind<br>
                            以为我能看穿一切以及背后的真相<br>
                            Got no way to prove it so maybe I'm blind<br>
                            无法证明什么，也许是我被蒙蔽<br>
                            But I'm only human after all I'm only human after all<br>
                            但毕竟我是个凡人，我只是个凡人<br>
                            Don't put your blame on me<br>
                            请别把你的火撒在我身上<br>
                            Don't put your blame on me<br>
                            别把你的火撒在我身上<br>
                            Take a look in the mirror and what do you see<br>
                            看一眼镜中世界，你看到了什么<br>
                            Do you see it clearer or are you deceived in what you believe<br>
                            你洞穿了一切还是被信仰所欺骗？<br>
                            Cos I'm only human after all you're only human after all<br>
                            因为我只是个凡人，你只是个凡人<br>
                        </p>
                    </blockquote>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-md-pull-9">
            <ul>
                <li>day1</li>
                <ul>
                    <li>笔记一</li>
                    <li>笔记一</li>
                    <li>笔记一</li>
                </ul>
                <li>day2</li>
                <li>day3</li>
            </ul>
        </div>
    </div>
    <footer>
        <div class="text-center">
            <address>
                <strong> Twitter, Inc.</strong><br>
                <abbr title="Phone">Phone:</abbr>0000000
            </address>
        </div>
    </footer>
</div>
</body>
</html>

2、样式