bootstrap 学习笔记

时间 2019-11-12

原文原文链接

1、bootstrap 入门

一、下载已编译版 bootstrap

　　地址：http://twitter.github.com/bootstrap/assets/bootstrap.zipcss

二、文档结构

 1 bootstrap/
 2   ├── css/
 3   │   ├── bootstrap.css
 4   │   ├── bootstrap.min.css     （压缩版）
 5   ├── js/
 6   │   ├── bootstrap.js
 7   │   ├── bootstrap.min.js      （压缩版）
 8   └── img/
 9       ├── glyphicons-halflings.png
10       └── glyphicons-halflings-white.png

2、bootstrap 框架

一、全局设置

bootstrap 框架必须基于html5html

1 <!DOCTYPE html>
2 <html lang="en">
3   ...
4 </html>

1.一、bootstrap 配置html5

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>Bootstrap 101 Template</title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <!-- Bootstrap 基础样式-->
 7     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 8   </head>
 9   <body>
10     <h1>Hello, world!</h1>
11     <script src="http://code.jquery.com/jquery.js"></script>
12     <script src="js/bootstrap.min.js"></script>
13   </body>
14 </html>

二、默认为格栅布局

默认状况下, 采用12 列方式布局 , 并造成一个宽度为940px的容器
响应式CSS文件时, 网格会根据可视窗口大小适应724px与1170px宽度. 在可视窗口低于767px宽度, 列会成为流式, 在垂直方向堆叠

2.一、格栅样式的基本代码

建立一个.row 容器
在容器中加入合适数量的 .span* 列便可
全部 .span* 列所跨越的栅格数之和最可能是12(或者等于其父容器的栅格数)。

1 <div class="row"> 
2   <div class="span4">...</div>
3   <div class="span8">...</div>
4 </div>
5

2.二、列偏移jquery

把列向右移动可以使用.offset* （*：表明偏移值）

1 <div class="row">
2   <div class="span4">...</div>
3   <div class="span3 offset2">...</div>
4 </div>
5

以上代码为，偏移2列git

2.三、列的嵌套github

在默认的网格系统中, 在已有的.span* 内添加一个新的.row 并加入 .span* 列, 就可实现嵌套. 嵌套在内的每列列数总和要等于父级列.bootstrap

也就是说，把某一列分红 N 列，N 的数量总和不能大于父列的值。 api

1 <div class="row">
2   <div class="span9">
3     Level 1 column
4     <div class="row">
5       <div class="span6">Level 2</div>
6       <div class="span3">Level 2</div>
7     </div>
8   </div>
9 </div>

三、流式格栅布局

　　流式栅格系统对每一列的宽度使用百分比而不是像素数量。框架

3.一、流式栅格样式HTML代码ide

　　将.row 替换为.row-fluid ，这样能方便的在流式与固定栅格之间切换。

1 <div class="row-fluid">
2   <div class="span4">...</div>
3   <div class="span8">...</div>
4 </div>

3.二、流式的列偏移

　　定义方式和固定栅格系统相同: 在任何想偏移的列添加.offset*便可.

1 <div class="row-fluid">
2   <div class="span4">...</div>
3   <div class="span4 offset2">...</div>
4 </div>

3.三、流式的嵌套

　　和固定网格的嵌套有一点不一样: 嵌套的列数总和不须要等于父级列.

　　相反的, 每一个级别的嵌套列属性将被重置, 由于嵌套列会占据父列的100%宽度.

 1 <div class="row-fluid">
 2   <div class="span12">
 3     Fluid 12
 4     <div class="row-fluid">
 5       <div class="span6">
 6         Fluid 6
 7         <div class="row-fluid">
 8           <div class="span6">Fluid 6</div>
 9           <div class="span6">Fluid 6</div>
10         </div>
11       </div>
12       <div class="span6">Fluid 6</div>
13     </div>
14   </div>
15 </div>
16

四、布局

4.1 固定式布局

　　常见的固定宽度的布局方式，只需添加 <div class="container"> 。　　

1 <body>
2   <div class="container">
3     ...
4   </div>
5 </body>
6

4.2 流式布局

　　只须要<div class="container-fluid">—这很是适合应用于程序和文档类的网站。

　　如：流式两列式布局

 1 <div class="container-fluid">
 2   <div class="row-fluid">
 3     <div class="span2">
 4       <!--Sidebar content-->
 5     </div>
 6     <div class="span10">
 7       <!--Body content-->
 8     </div>
 9   </div>
10 </div>                    
11

五、响应式设计

　　在<head>里,

添加一个 meta标签：<meta name="viewport" content="width=device-width, initial-scale=1.0">
添加一个响应式样式表：<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

5.1 bootstrap 支持的设备

类型	版面宽度	列宽	间隙
大分辨率	大于1200px	70px	30px
默认	大于980px	60px	20px
平板	大于768px	42px	20px
手机到平板	小于767px	流式列, 没有固定宽度
手机	小于480px	流式列, 没有固定宽度

　　.col-xs-* 表示：超小屏幕

　　.col-sm-* 表示：自适应手机

　　.col-md-* 表示：平板

　　.col-lg-* 表示：PC机、电脑等大分辨率设备

5.2 响应式设计支持的属性

　　须要谨慎使用这些工具，避免在同一个站点建立彻底不一样的版本。响应式实用工具目前只适用于块和表切换。

属性	手机767px及如下	平板979px与768px之间	电脑默认
`.visible-phone`	显示	隐藏	隐藏
`.visible-tablet`	隐藏	显示	隐藏
`.visible-desktop`	隐藏	隐藏	显示
`.hidden-phone`	隐藏	显示	显示
`.hidden-tablet`	显示	隐藏	显示
`.hidden-desktop`	显示	显示	隐藏

3、基本的CSS样式

一、排版

1.1 标题 <h1>到<h6>

　　副标题在标题内还能够包含 <small> 标签或赋予 .small 类的元素，能够用来标记副标题。

1.2 强调

　　　强调内嵌和文本块, 使用小标签。<samll>

　　　加粗文本<strong>

　　　斜体 <em>

　　　注意! 在HTML5可随意使用 <b> 和 <i>, <b>是为了突出词或短语, 而不会有其余重要含义, 而 <i> 提供主要是语态, 专业术语等含义.

1.3 段落文本对齐方式

1 　　<p class="text-left">居左文字.</p>
2 
3 　　<p class="text-center">居中文字.</p>
4 
5 　　<p class="text-right">居右文字.</p>

1.4 文本的强调属性（文本颜色）

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

1 <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
2 <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
3 <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
4 <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
5 <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

1.5 缩写

　　当鼠标悬停在缩写和缩写词，就会提示完整内容的HTML的内容。

　　<abbr> 元素. abbr元素用于缩写的文本，

　　<abbr>的 title 属性，用于，提示信息的内容。

　　.initialism 类，将缩写的词稍微大写（字字母）

1 <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

1.6 引用

1.6.1 普通引用把任何 HTML 嵌套在 <blockquote> 里面便可. 对于直接的引用, 咱们建议使用 <p>

1.6.2 备注来源

用来标注引用来源（默认为左对齐）

　　　　　添加 <small>> 标签来注明引用的来源.

　　　　　来源标题能够放在这个<cite> 标签里面

　　　右对齐：在<blockquote class="pull-right">

1.7 列表

1.7.1 有序列表 <ol><li>。。。</li></ol>

1.7.2 无序列表 <ull><li>。。。</li></ul>

1.7.3 无样式列表 <ul class="unstyled">

　　　　　　　　　　　<li>...</li>
　　　　　　　</ul>

1.7.4 水平列表

　　在<ul>或<ol>中使用 inline 让列表项水平排列一行, 同时每项之间都有必定的间距.

　　水平列表，在导航栏中使用。

1.7.5 描述

　　垂直描述

1 <dl>
2   <dt>...</dt>
3   <dd>...</dd>
4 </dl>

　　水平描述 .dl-horizontal

1 <dl class="dl-horizontal">
2   <dt>...</dt>
3   <dd>...</dd>
4 </dl>

二、代码

2.1 行内代码

使用 <code> 包装行级代码片断。

2.2 代码块

使用<pre>对多行代码进行包装。切记必定要对代码中的每一个<>进行转义，这样方能获得正常的渲染结果。

还可使用 .pre-scrollable 给代码区域设置350px的最大高度并设置一个纵向滚动条。

三、表格

3.1 默认样式

　　为保证可读性并维持表格结构不变。仅使用一组边线对表格进行格式化. 在任意 <table> 添加 .table 类便可。

3.2 其余可选类样式

　　下面所列出的类是为了补充 .table 类的基本样式的。

.table-striped 斑马线

.table-bordered 边线表格

.table-hover　　　鼠标移动效果

.table-condensed　经凑表格（让表格更加紧凑，全部表格单元的padding都会减半(从8px到4px)）

3.3 可选的属性

　　在表格的行内或单元格内添加颜色

属性	描述
`.success`	表示成功或积极的行为.（浅绿色）
`.error`	表示一个危险或存有潜在危险的做用.（）
`.warning`	表示警告, 可能须要注意的做用.
`.info`	做为一个信息的默认样式.

3.4 支持表格的标签

标签	描述
`<table>`	用以包装表格化的数据
`<thead>`	容纳表格标题行 (`<tr>`)以标识表格列，
`<tbody>`	容纳表格行 (`<tr>`)
`<tr>`	容纳行内的一组单元格 (`<td>` or `<th>`)
`<td>`	默认的表格单元格
`<th>`	用于列头(或是行，取决于标签所在位置和区域)的特殊标签必须置于 `<thead>` 标签内。
`<caption>`	表格用途的描述或摘要，对屏幕阅读器（视障人士读屏软件）很是有用

bootstrap 学习笔记

1、bootstrap 入门

一、下载已编译版 bootstrap

二、文档结构

2、bootstrap 框架

一、全局设置

二、默认为格栅布局

2.一、格栅样式的基本代码

三、流式格栅布局

四、布局

五、响应式设计

3、基本的CSS样式

一、排版

二、代码

三、表格

四、表单

五、按钮

六、图像

bootstrap 学习笔记

1、bootstrap 入门

一、下载已编译版 bootstrap

二、文档结构

2、bootstrap 框架

一、全局设置

二、默认为格栅布局

2.一、格栅样式的基本代码

三、流式格栅布局

四、 布局

五、 响应式设计

3、基本的CSS样式

一、 排版

二、代码

三、表格

四、表单

五、按钮

六、图像

四、布局

五、响应式设计

一、排版