2017.11.30笔记

来源：互联网发布：如何写网络演讲稿编辑：程序博客网时间：2024/05/16 04:40

起步 Bootstrap 概述 2010 年 6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后，Bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升级，由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。 Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 PC 端、PAD以及手机移动端的页面访问。下载国内文档翻译官网：http://www.bootcss.com 进入以上官网中Bootstrap3页面，下载： ![这里写图片描述](https://box.kancloud.cn/f91cf3f2ff5659ed6dd6c5c8917001a4_1158x509.png) 下载完成后解压文件夹，得到一下原始项目结构： ![这里写图片描述](https://box.kancloud.cn/a1387e57cc5062f1ba02bf7f127a7636_378x372.png) 主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。 css 目录中有四个 css 后缀的文件，其中包含 min 字样的，是压缩版本，一般使用这个；不包含的属于没有压缩的，可以学习了解 css 代码的文件；而 map 后缀的文件则是 css 源码映射表，在一些特定的浏览器工具中使用。 js 目录包含两个文件，是未压缩和压缩的 js 文件。 fonts 目录包含了不同后缀的字体文件。创建第一个页面我们创建一个 HTML5 的页面，并且将 Bootstrap 的核心文件引入，然后测试是否正常显示。

<!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">    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->    <title>Bootstrap 101 Template</title>    <!-- Bootstrap -->    <link href="css/bootstrap.min.css" rel="stylesheet">    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->    <!--[if lt IE 9]>      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    <![endif]-->  </head>  <body>    <h1>你好，世界！</h1>    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>    <!-- Include all compiled plugins (below), or include individual files as needed -->    <script src="js/bootstrap.min.js"></script>  </body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

<!DOCTYPE html><html lang="zh-CN">  ...</html>1
2
3
4

移动设备优先 Bootstrap 3 重写了整个框架，使其一开始就是对移动设备友好的，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在之中添加 viewport 元数据标签。

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

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">1

这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式并不推荐所有网站使用，还是要看你自己的情况而定。 Normalize.css 为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。 .container 类用于固定宽度并支持响应式布局的容器。

<div class="container">  ...</div>1
2
3

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

<div class="container-fluid">  ...</div>1
2
3

栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。移动设备优先在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。 //分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等属性的原因，这两种容器类不能相互嵌套。固定宽度

…

100%宽度

…

栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多12 列。通过一系列的行(row)与列(column)的组合来创建页面布局。

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

栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-lg-*不存在，也影响大屏幕设备。

列偏移

<div class="row">    <div class="col-md-8 a">8</div>    <div class="col-md-3 a col-md-offset-2">3</div></div>1
2
3
4

列嵌套

<div class="row">    <div class="col-md-9 a" style="padding: 0;">    <div class="col-md-4 a">4</div>    <div class="col-md-4 a">4</div>    <div class="col-md-4 a">4</div></div>    <div class="col-md-3 a">3</div></div>1
2
3
4
5
6
7
8
9

交换位置

<div class="row">        <div class="col-md-9 col-md-push-3 a">                    9        </div>        <div class="col-md-3 col-md-pull-9 a">3</div></div>1
2
3
4
5
6
7

排版样式
页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即20px)；

段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。

创建包含段落突出的文本

<p>Bootstrap框架</p><p class="lead">Bootstrap框架</p>标题        <h1>Bootstrap框架</h1>        <h2>Bootstrap框架</h2>        <h3>Bootstrap框架</h3>        <h4>Bootstrap框架</h4>        <h5>Bootstrap框架</h5>        <h6>Bootstrap框架</h6>1
2
3
4
5
6
7
8
9

我们从 Firebug 查看元素了解到，Bootstrap 分别对 h1 ~ h6进行了 CSS 样式的重构，并且还支持普通内联元素定义class=(.h1 ~ h6)来实现相同的功能。
内联元素使用标题字体

<span class="h1">Bootstrap框架</span>1

在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题，//在标题元素内插入 small 元素

    <h1>Bootstrap框架<small>Bootstrap框架</small></h1>    <h2>Bootstrap框架<small>Bootstrap框架</small></h2>    <h3>Bootstrap框架<small>Bootstrap框架</small></h3>    <h4>Bootstrap框架<small>Bootstrap框架</small></h4>    <h5>Bootstrap框架<small>Bootstrap框架</small></h5>    <h6>Bootstrap框架<small>Bootstrap框架</small></h6>1
2
3
4
5
6
7

对齐

<p class="text-left">Bootstrap框架</p><p class="text-center">Bootstrap框架</p><p class="text-right">Bootstrap框架</p><p class="text-justify">Bootstrap框架</p>//浏览器支持有问题列表排版1
2
3
4
5

<ul class="list-unstyled">            <li>Bootstrap框架</li>            <li>Bootstrap框架</li>            <li>Bootstrap框架</li>            <li>Bootstrap框架</li>        </ul>        <ul class="list-inline">            <li>Bootstrap框架</li>            <li>Bootstrap框架</li>            <li>Bootstrap框架</li>            <li>Bootstrap框架</li>        </ul>       1
2
3
4
5
6
7
8
9
10
11
12
13

代码

For example, <code>&lt;section&gt;</code> should be wrapped as inline.To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>1
2
3

表格
Bootstrap 提供了一些丰富的表格样式供开发者使用。

基本格式

<table class="table ">1

注：我们可以通过 Firebug 查看相应的 CSS。

条纹状表格

<table class="table table-striped">1

注：表格效果需要基于基本格式.table

带边框的表格

<table class="table table-bordered">1

悬停鼠标

<table class="table table-hover">1

状态类

<tr class="success">1

注：一共五种不同的样式可供选择。

隐藏某一行

<tr class="active sr-only">1

响应式表格
在小于768px，为表格加上边框

<table class="table table-responsive">1

按钮
Bootstrap 提供了很多丰富按钮供开发者使用。

可作为按钮使用的标签或元素
转化成普通按钮

<button class="btn btn-default">Button</button><a href="###" class="btn btn-default">Link</a><input type="button" class="btn btn-default" value="Input"/>1
2
3

注意事项有三点：

虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持<button> 元素。
链接被作为按钮使用时的注意事项如果 <a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role=”button” 属性。
我们总结的最佳实践是：强烈建议尽可能使用<button>元素来获得在各个浏览器上获得相匹配的绘制效果。
预定义式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。

类名解释
btn-default 默认样式
btn-success 成功样式
btn-info 一般信息样式
btn-warning 警告样式
btn-danger 危险样式
btn-primary 首选项样式
btn-link 链接样式

<button class="btn btn-default">Button</button>        <button class="btn btn-primary">Button</button>        <button class="btn btn-success">Button</button>        <button class="btn btn-info">Button</button>        <button class="btn btn-warning">Button</button>        <button class="btn btn-link">Button</button>        <button class="btn btn-danger">Button</button>1
2
3
4
5
6
7

尺寸大小
从大到小的尺寸

<p>        <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>            <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>        </p>        <p>            <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>            <button type="button" class="btn btn-default">（默认尺寸）Default button</button>        </p>        <p>            <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>            <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>        </p>        <p>            <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>            <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>        </p>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

块级按钮
块级换行

<button class="btn  btn-block">Button</button>1

激活状态

<button class="btn active">Button</button>1

禁用状态

<button class="btn disabled">Button</button>1

表单 Bootstrap 提供了一些丰富的表单样式供开发者使用。基本格式实现基本的表单样式

<form>            <div class="form-group">                <label>电子邮件</label>                <input type="email" class="form-control" placeholder="请输入您的邮箱..." />            </div>            <div class="form-group">                <label>密码</label>                <input type="password" class="form-control" placeholder="请输入您的密码..." />            </div>        </form>1
2
3
4
5
6
7
8
9
10
11

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control 类的、和元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。内联表单让表单左对齐浮动，并表现为 inline-block 内联块结构

<form class="form-inline">1

注：当小于 768px，会恢复独占样式表单合组前后增加片段

<div class="form-group">        <label>价格</label>        <div class="input-group">        <div class="input-group-addon">$</div>            <input type="text" class="form-control" />        <div class="input-group-addon">.00</div>        </div>    </div>1
2
3
4
5
6
7
8

不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。水平排列让表单内的元素保持水平排列

<form class="form-horizontal"> <div class="form-group"><label class="col-sm-2 control-label">电子邮件</label>        <div class="col-sm-10"><input type="email" class="form-control" placeholder="请输入您的电子邮件"></div></div></form>1
2
3
4
5
6
7
8
9

注：control-label 表示和父元素样式同步。复选框和单选框

    <div class="checkbox disabled">                <label>                <input type="checkbox" disabled/>体育                </label>            </div>            <div class="checkbox">                <label>                <input type="checkbox" />音乐                </label>            </div>            <label class="checkbox-inline">                <input type="checkbox" disabled/>体育            </label>            <label class="checkbox-inline">                <input type="checkbox" />音乐            </label> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

下拉列表

<select class="form-control">        <option value="">1</option>        <option value="">2</option>        <option value="">3</option>        <option value="">4</option></select>   1
2
3
4
5
6

校验状态设置为错误状态

<div class="form-group has-error">1

注：还有其他状态如下样式说明 has-error 错误状态 has-success 成功状态 has-warning 警告状态 label 标签同步相应状态

<label class=" control-label">电子邮件</label>1

添加额外的图标
文本框右侧内置文本图标

<div class="form-group has-error has-feedback">    <label class="col-sm-2 control-label">电子邮件</label>    <div class="col-sm-10">        <input type="email" class="form-control" placeholder="请输入您的邮箱..." />            <span class="glyphicon glyphicon-ok form-control-feedback"></span>    </div></div>1
2
3
4
5
6
7

类名含义
glyphicon-ok 成功状态
glyphicon-warning-sign 警告状态
glyphicon-remove 错误状态
控制尺寸
从大到小

<input type="email" class="form-control input-lg" placeholder="请输入您的邮箱..." />1

注：也可以设置父元素 form-group-lg、form-group-sm，来调整。
图片

<img src="..." alt="..." class="img-rounded"><img src="..." alt="..." class="img-circle"><img src="..." alt="..." class="img-thumbnail">

阅读全文

0 0