bootstrap2文档的学习

时间 2019-11-26

标签 bootstrap2 bootstrap 文档学习栏目 Bootstarp 繁體版

原文原文链接

就像刚开始的优雅，直观，强大的前端框架，让web开发更快，更容易，bootstrap给个人感受就是把经常使用的布局，组件（导航，列表，按钮，表格），还有规范化颜色等等，同时它的遍历不至于此，他还支持了自定义，利用less，全局定义这些变量，让你自定义区修改，同时还有更多的图标插件能够用。在布局方面，更好的迎合了目前市场上移动端的出现，有了流网格，咱们就不用再去考虑去兼容不一样屏幕的展现端。

一、框架

bootsrap构建于12列响应式网格，布局和组件。同时基于html5和jquery

<!DOCTYPE html>

...

</html>

因此文件头必须是html5

移除了body的margin
设置body的背景颜色为 background-color: white;
使用@baseFontFamily, @baseFontSize, 和 @baseLineHeight 属性做为咱们排版的基础
经过 @linkColor 设置全局链的接颜色, 并适用于:hover状况下的下划线

而后在scaffolding.less文件里设置了一些基础的全局展现效果、排版、连接样式

总体布局分为两类，和position属性是同样的，分为默认的网格系统和流式网格系统，主要区别是流式网格系统是按照百分比，每一行都是12个，这个下面会说：

1 网格系统

Bootstrap的网格(栅格)系统在默认状况下采用 12 列, 可制做宽度为940px的容器, 同时没有响应式功能. 当加入响应式CSS文件, 网格会根据视口大小适应724px与1170px宽度. 当视口低于767px宽度, 列会成为流式, 并上下垂直放置.

对于一个简单的两列布局, 建立一个.row和添加带有(合适)数字的.span*做为列. 由于这是一个12列的网格, 因此每个 .span* 都是这12个数字, 而且每行的列(span)的数字相加必须等于12 (或者等于该父级).css

<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

在这个例子, 咱们用了 .span4 和 .span8, 一共是12列, 这就造成一个完整的行html

偏移是.offset*属性，指定单位偏移量

当须要嵌套时，在默认的网格系统里, 要实现嵌套可对已有的 .span* 内添加一个新的 .row 并加入 .span*. 嵌套在内的列数总和要等于父级列.，固然也能够不相同。

2 流式网格系统

流式网格的列宽使用百分比, 并非具体像素值. 它对于固定的网格系统具备相同的应对能力, 关键是在不一样屏幕分辨率和设备之间, 又能够以正确的比例显示

只须要把.row 改为.row-fluid ，列的属性不变，一样偏移也是相同的，可是嵌套就有点不一样

嵌套在内的列数总和须要等于12. 这是由于流式网格是用百分比设置宽度, 并非像素值.

3 固定布局 container

建立一个流式、两栏的布局, 只须要 <div class="container-fluid">—这很是适合应用于程序和文档类的网站.（可是通过测试，若是分红两栏，可是内容仍是会有重叠）

<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
</div>
<div class="span10">
</div>
</div>
</div>

4 响应式设计

固然不少时候要检测用户使用的屏幕多大，这须要咱们检测，使用响应式功能更为方便

在你项目文件中的<head>里, 添加一个如例子所示的meta标签和一个响应式样式表来开始使用响应式. 若是已经在自定义页面编译好一个Bootstrap, 那么只需添加一个meta标签.前端

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

注意! Bootstrap在默认状况下是没有使用响应式功能的, 由于不是任何状况都须要使用到. 咱们并非让开发者移除此功能, 而是最好在须要使用的时候才使用它.html5

二基本css

基础的css包括排版，代码输入，表格，表单，按钮，图像，最后还免费提供不少Glyphicons图标。

1 排版

bootstrap对标题h1-h6都进行了修改，还有全局默认的font-size，line-hegiht 以及段内的行间距。

新定义了突出段落 .lead <p class="lead">...</p>

强调<small> <strong> <em> 还有html5的<b> <i>

对齐 .text-left .text-center .text-right

强调颜色规范了五中颜色 text-warning text-error text-info text-sucess

缩写很厉害啦， <abbr> 利用title属性能够将缩写包围的字母显示全写，<abbr title="attribute">attr</abbr>，之前都要用link实现的

地址管理，<address> 让html更加语义化，毕竟html是超文本标记语言

<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>

*css 层叠样式表 cascading style sheets

引用 <blockquote>

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

列表没变有序ol 无序 ul，固然还有不少添加的css， .unstyled 无样式， .inline-block水平排列，

2 代码

由于须要一些特殊标记，如<>,因此添加了<code>

For example, <code><section></code> should be wrapped as inline

3 表格

添加属性

.table-striped在表格内部添加条样，间隔一个一个 .table-bordered（圆角） .table-hover在table内部使用停悬效果 .table-condensed 是得单元格padding减半，让表格更加紧凑

一样仍是四个颜色 .success .error .warning .info

4 表单

Label nameExample block-level help text here.Check me out

<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>

还有文本框、下拉菜单、按钮不少没说出来，本身看文档吧

5 按钮

btn btn-info btn-primary btn-success btn-warning btn-danger btn-inverse btn-link

大小区别 btn-large btn-small btn-mini

6 图像

改变展现样式

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

7 图标

全部图标都须要一个独特、前缀带 icon-属性的<i> 标签. 如需使用时, 可直接将如下代码使用在任何地方:jquery

<i class="icon-search"></i>

也可使用风格相反(白色)的图标, 这里准备了一个额外的属性. 咱们将具体展现这些属性在导航条和下拉菜单中悬停和活动时候的状态效果.web

<i class="icon-search icon-white"></i>

注意! 当在旁边使用文本, 按钮或导航连接, 为了有一个适当的间距, 请必定要在<i>后面留一个空格位置.bootstrap

三组件

组件有下拉菜单，按钮组，按钮式下拉菜单，导航（这个使用不少），导航条，路径是导航，分页，标签和标记，排版，省略图，通知，进度条

四插件

插件能够单独被添加(有些有可能须要依赖), 或一次性所有导入. bootstrap.js 或 bootstrap.min.js 文件中, 包含了全部插件.

不少js插件，咱们能够用一下