bootstrap 笔记2

一、bootstrap CSS

1.bootstrap CSS概览

1）移动设备优先

确保适当的绘制和触屏缩放,add tag:<meta name="viewport" content="width=device-width,initial-scale=1.0"

2）响应式图像

<img src="..." class="img-reaponsive" alt="响应式图像“>

3）全局显示、排版与链接

全局显示：body{magin:0;}

排版：@font-family-base @font-size-base @line-height-base

链接样式：@link-color

样式在scaffolding.less中可以找到

4）跨浏览器的一致性 Normalize.css

5）容器（container）：用于包裹页面上的内容

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

.container-fluid：用于100%宽度，占据全部视口的容器

note:默认情况下，容器是不可嵌套的

6）bootstrap 浏览器/设备支持

2.bootstrap网格系统（Grid system)

Grid system定义：Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。

1)移动设备优先策略

内容> 布局> 渐进增强

2）工作原理

行必须放置在.container class（.container-fluid class)内,以便获得适当的对齐(alignment)和内边距(padding) 。

使用行来创建列的水平组

内容应该放置在列内,且唯有列可以是行的直接子元素

预定义的网格类,比如.row和.col-xs-4,可用于快速创建网格布局

LESS混合类可用于更多语义布局

列通过内边距( padding)来创建列内容之间的间隙。该内边距是通过.rows上的外边距(margin)取负,表示第一列和最后一列的行偏移

网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如要创建三个相等的列，用三个col-xs-4

3）媒体查询

两个部分：媒体规范+大小规则

@media (min-width:@screen-sm-min) and (max-width:@screen-sm_max){...}

4）网格选项

5）基本的网格结构

<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> note:在col-*-*的前提下，会自动响应式排版

6）响应式的列重置

.clearfix class和响应式工具来实现

7）偏移列

col-md-offset-*类，将一个列的左外边距增加*列（*范围从1到11）

例如：<div class="col-md-3 offset-md-3">向右偏移3格</div>

8）嵌套列

在col里面增加一个新的.row，并在一个已有的.col-md-*列内添加一组.col-md-*列。被嵌套的行应包含一组列。

example: <div class="container"> <div class="row"> <div class="col-md-4">bootstrap <div class="row"> <div class="col-md-3">html</div> </div> <div class="row"> <div class="col-md-3">html</div> </div> </div> <div class="col-md-4">bootstrap</div> <div class="col-md-4">bootstrap</div> </div> </div>

9）列排序

作用:以一种顺序编写列，然后以另一种顺序显示列

左：col-md-push-* 右： col-md-pull-*（1-11）

 

3.bootstrap排版

1）标题：h1-h6（大到小）

<h1>标题</h1>

2)内联子标题:元素两边加上<small>

<h1>标题<small>副标题</small></h1>

3)引导主体副本

强调文本class=“lead”(加大加粗，行高更高）

<p class="lead">这是.....</p>

4)强调：HTML默认强调标签<small>（为父文本的85%）、<strong>（更粗）、<em>(斜体)

class=“text-left" 向左对齐

class="text-center" 居中对齐

class="text=right" 向右对齐

class="text-muted" 本行内容是减弱的

class="text-primary"

class="text-sucess"

class="text-info"

class="text-worning"

class="text=danger"

5)缩写：<abbr>元素：显示在文本底部的一条虚线边框,鼠标悬停是后显示完整文本

<abbr title="world wide web">www</abbr>

6)地址：<address>标签(默认：display:block)

<address> <strong>some company</strong><br> 007 street<br> Some city,State XXXX<br> <abbr title="phone">P:</abbr>(123)456-9870 </address>

7)引用

<blockquote> <p>这是一个引用示例</p> </blockquote>

8)列表

有序列表

<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

无序列表

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

未定义样式列表

<ul class="list-unstyled"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

内联列表

<ul class="list-line"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

定义列表

<dl> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description</dt> <dd>Item 2</dd> </dl>

水平的定义列表

<dl class="dl-horizontal"> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description</dt> <dd>Item 2</dd> </dl>

更多：

4.bootstrap代码

1)两种形式：

<code> tag:内联显示

<pre> tag:独立的块元素或者代码有很多行

note：用<pre>和<code>时候，开始和结束标签使用unicode变体：&lt;&gt;

<p><code><header></code></p> <pre> <article> <h1>aretical heading</h1> </article> </pre>

5.bootstrap表格

表格类：

下表的类可用于表格和行或者单元格

1)基本的表格

<table class="table"> <caption>基本的表格布局</caption> <thead> <tr> <th>名称</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Nancy</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> </tr> </tbody> </table>

2)可选的表格类：

条纹表格：添加.table-striped class

边框表格：添加.table-bordered class(圆角）

悬停表格：添加.table-hover class

精简表格：添加.table-condensed class

3)上下文类：改变表格行或者单个单元格的背景颜色

4)响应式表格：把任意的.table包在一个<div class="table-responsive ">内

6.bootstrap表单

1)三种类型表单布局：垂直表单（默认） 内联表单 水平表单

垂直或者基本表单

2)创建基本表单的步骤：

~向父<fom>元素添加role-"form"

~把标签和控件放在一个带有class.form-group的<div>中

~向所有的文本元素<inpup. <textarea>和<select>添加class.form-control

<form role="form"> <div class="form-group"> <label for="name">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div> <div class="form-group"> <label for="inputfile">文件输入</label> <input type="file" id="inputfile"> <p class="help-block">这是块级帮助文本的实力</p> </div>

2)内联表单：（所有元素是内联的，向左对齐的，标签是并排的)

向form标签添加class.form-inline

3)水平表单:

创建水平布局表单的步骤：

向父<fom>元素添加class form-horizontal

把标签和控件放在一个带有class form-group的<div>中

向标签添加class.control-label

<form class="form-horizontal" role="form"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-lable">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="请输入名字"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-lable">姓</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="请输入姓"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <lable> <input type="checkbox">请记住我 </label> </div> </div> </div> </form>

4)支持的表单控件

input,textarea,checkbox,radio和select

input(输入框）

作用：输入大多是必要的表单数据

note：适当的type声明很有必要，比如：text.password,datetime.datetime-local.date等等

<input type="text" class="form-control" placeholder="文本输入”>

textarea（文本框）

作用：多行输入（必要时候可以改变rows属性）

<textarea class="form-control" rows="3"></textarea>

checkbox(复选框）与radio（单选框）

作用：从一系列预设置的选项中进行选择

控制他们显示在同一行上：.checkbox-inline 或者radio-inline class

<div class="checkbox"> <label><input type="checkbox" value="">选项1</label> <div> <div class="checkbox"> <label><input type="checkbox" value="">选项2</label> </div> <div class="radio"> <lable><input type="radio" name="option1" id="option1" value="option1">选项 2</label> </div>

select(选择框）

作用：从多个选项中进行选择，但默认情况下只能选择一个选项

允许用户选择多个对象：mutiple

静态控件

在水平表单的表单标签后放置纯文本<p class="form-control-static">

表单控件状态

输入框焦点：当输入框input接收到：focus时，输入框的轮廓会被移除，同时应用box-shadow

禁用 ：disabled

表单控件大小

class.input-lg | .col-lg-*

表单帮助文本

在<input>后使用.help-block

8.bootstrap按钮

note:任何带有class.btn的元素都会继承圆角灰色按钮的默认外观

1)

 

<input type="button" class="btn btn-defalut|btn-primary|btn-success|btn-info|btn-warning|btn-danger|btn-link">XX</button>

2)按钮大小

3)按钮状态

激活状态（active）

禁用状态（disabled)

4)按钮标签：在<a> <button> <input>上使用按钮class,建议在button元素上使用按钮class

<a class="btn btn-dafult" href="#" role="button">链接</a>

<button class="btn btn-default" type="submit">按钮</button>

<input class="btn btn-default" type="button" value="输入">

<input class="btn btn-default" type="submit" value="提交">

9.bootrap 图片

1）三种：

.img-rounded:添加border-radius: 6px来获得图片圆角

.img-circle:添加border-radius:500px来让整个图形成圆形

.img-humbnail:添加一些内边距(padding)和一个灰色的边框

2）<img>类

3）响应式图片

.img-responsive:使图片支持响应式设计