Bootstrap随笔

1.Bootstrap用户界面架构

Bootstrap是Twitter公司里面的开发者和设计师做出来的一套用在网页上的用户界面和交互的架构，架构的意思就是把一些经常要用的东西事先为你编写好，需要的时候可以直接去调。比如说你想去设计页面的布局，你需要去计算页面的宽度，然后手工把布局需要用到的CSS代码写出来。Bootstrap架构内置了一套网格布局的系统，你只需要在元素当中使用设计好的布局相关的网格的类，不需要你再手动去撰写布局时使用的CSS代码了。再比如说，你需要在网页中出现一个按钮，通常你需要使用图形设计软件设计一个这个的按钮，让后再用html和css把这个按钮表示出来。如果在网页中使用Bootstrap架构的话，我们可以直接为元素去添加Bootstrap中设计好的按钮相关的类，这样就可以立即在网页中出现一个漂亮的按钮，Bootstrap还允许我们控制这个按钮的颜色,样式,大小等等。Bootstrap中里面包含了一些在网页经常要使用界面的设计(表格,表单,导航栏,按钮组等)，Bootstrap还提供了很多交互的小插件(对话框，下拉菜单等)，这些你都可以在网页中去直接使用，你只需事先按照Bootstrap设计好的方式：先把代码的结构写出来，然后在元素使用相应的类，剩下的事Bootstrap全部会帮你做好，这就让我们的工作变的非常简单

 

2.bootstrap项目的官方网站，这个网站的界面就是使用bootstrap这个架构来创建的，你可以把这个网站当做是bootstrap演示的网站。bootstrap网格系统可以是响应式的，也就是说如果你愿意的话可以让网页根据上网时的屏幕分辨率来做出响应的变化

 

3.bootstrap.zip解压会看到下面3个文件夹

A. css：css这个文件夹下存放的是Bootstrap架构中最重要的部分，就是架构事先设计好的一些样式

a. bootstrap.css  文件里面是Bootstrap架构的核心，里面包含所有架构设计好的样式

b. bootstrap-responsive.css这个样式里面包含了响应式页面用到的一些CSS样式，如果你想让

你的网页变成响应式的，你需要在你的网页当中加载使用这个CSS样式表

B. img：存放着2张背景图片，这个Bootstrap架构当中需要用到的图标的背景图片，一个是黑色

版的图标背景，一个是白色版的图标背景

C. js ：这个文件中存放的是Bootstrap架构所有包含的Javascript插件，如果你打算在网页中使用

 

架构中下拉菜单,对话框等这些交互功能的话，你需要单独下载这些插件或者直接在网页中引入bootstrap.js(里面包含所有的bootstrap插件)这个文件

 

4.想在网页中使用Bootstrap架构，只需要在网页中加载架构提供的CSS样式表和js文件就可以了。

Bootstrap提供的插件是基于jQuery的，所以在使用Bootstrap插件的时候需要引入jQuery。

<meta name="viewport" content="width=devie-width, initaial-scale=1.0"/>

这个标签可以修复网页在大部分移动设备上面的显示。

因为我们网页的文旦类型是HTML5，这里需要使用到一些新的标签，用header来定义页头，用nav来定义主导航菜单，在IE9以下版本的浏览器并不认识这些标签，所以就没有办法为这些标签添加样式。那么修复这个问题，我们就需要使用html5.js这个脚本文件，这样我们就可以使用HTML5来创建这个页面了

<!–[if lt IE9]> <!--如果浏览器的版本低于IE9的话-->
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>

参考：http://www.cnblogs.com/jhti/archive/2011/07/13/2105039.html(让IE支持HTML5)

 

5.栅格系统

Bootstrap架构内置一套网格的布局系统，而且可以是响应式的网格布局系统。

网格布局就是网页分成数量的栏数或者是叫做网格，Bootstrap构架的网格就是把网页分成12栏，如果你想让一个元素占用一定栏数的宽度，你可以在这个元素上面引用一个特定的类，Bootstrap使用的就是span加栏数(span3,span4...)这样的类

Bootstrap样式：

class="container" 让容易中的内容显示在页面中间(一般用于body的直接子div)，container应用的是一个固定宽度(用于固定布局。而contaienr-fuild应用的是百分比宽度，用于流动布局)

 

 

6.Bootstrap固定宽度布局与流动布局

流动布局(相对的还有固定宽度的布局方式，也就是说你不管浏览器的窗口有多大，页面的宽度是固定的)我们把Bootstrap架构的固定布局转换成流动布局只需要去变换container和row的名称改成对应的流动布局类container-fuild和row-fuild(用于流动布局的类)

 

7.Bootstrap响应式布局

现在用户上网所使用的设备都不一样了，有可能是大屏幕的桌面电脑，也有可能是平板电脑或者是智能手机，那么这些上网设备屏幕的尺寸都不太一样，如果你先在不同的上网设备上优化页面的设计的话，你可以考虑使用响应式的布局设计。响应式的布局就是根据浏览窗口的尺寸做出相应的变化，比如你可以设置当浏览窗口小于940像素的时候，那么就把文字的大小变成15像素。原理很简单，就是使用CSS3的media Query来判断浏览器的尺寸，我们可以在CSS样式表中设置一些规则，比如当浏览器窗口的尺寸小于或者大于某一尺寸的时候应用某些特定样式，比如@media (max-width:767px){} 这行代码的意思就是当浏览器的窗口小于767像素的时候，在页面中去应用大括号之间定义的哪些样式。再比如@media (min-width:767px){}当浏览器的窗口最小宽度大于767像素时，会应用用大括号中定义的哪些样式

参考：http://www.uml.org.cn/html/201301094.asp(针对不同浏览器设置宽度)

 

8.Bootstrap把已有的固定宽度布局转换成响应式布局

bootstrap-responsive.css这个样式表已经为我们针对常用的上网设备做好了响应式的设计，比如说在大尺寸的桌面电脑上，也就是分辨率的宽度在1200像素以上的屏幕上，那么网格宽度就会由的60像素变成70像素，并且网格与网格之间的距离由原来的20像素变成30像素。在平板电脑的垂直状态下，每个网格的宽度会由默认的60像素变成42像素。如果是再小一些的浏览窗口话，那么所有的网格类就会变成流动的宽度并且网格类所在的元素会堆砌在一起，下面我们就来把一个普通的设计改成响应式的设计：只需要在页面中引入bootstrap-responsive.css就行了，然后我们查看class="span4"的div元素，逐渐改变浏览器窗口大小，观察media queries中样式在发生改变

9.Bootstrap响应式布局的实用类

在bootstrap-responsive.css这个样式表里面已经为我们设计好了几个实用的类，分别是：

.visible-phone 它的功能就是在智能手机设备上显示这个元素，在其他设备上隐藏这个元素

.visible-tablet 在平板电脑上显示这个元素，在其他设备上隐藏这个元素

.visible-desktop  在桌面电脑上显示这个元素，在其他设备上隐藏这个元素

.hidden-phone 它的功能是在智能手机上隐藏元素，在其他设备上任然显示这个元素

.hidden-tablet  在平板电脑上隐藏这个元素，在其他设备上显示这个元素

.hidden-desktop  在桌面电脑上隐藏这个元素，在其他设备上任然显示这个元素

这些类其实就是使用了CSS的display属性，决定了页面中元素在什么设备上出现。其实是根据浏览器的宽度来决定判断是不是显示该样式，还是隐藏该样式。

也就是说在桌面电脑上只要将浏览器的宽度变成平板电脑的宽度，那么拥有.visible-desktop的div会隐藏起来

10.Bootstrap常用标签与样式

a.<strong>以粗体渲染文本。

b.<em>强调文本，通常以斜体渲染。

c.<abbr>如果这个文字使用了简称，我们可以使用abbr这个标签去标记，在这个标签里面我们可以使用title属性，属性的值就是简称的全称。我们可以在abbr标签中使用class="initialism"，这样简称就会变成大写字母的(注意：这个样式只能用于abbr标签，别的不能用)

d.<blockquote class="pull-right"><p>She puzzled over this for some time。</p><small>来自<cite>百度</cite></small></bockquote>

<blockquote class="pull-right">设置文本中的一段引语。其中class="pull-right"这是bootstrap中为blockquote定义的样式，这样引用会右对齐并且灰

色条会在右边

11.Bootstrap列表，添加bootstrap样式与不添加这个样式比较看看效果

<DL class="dl-horizontal"><!--bootstrap为dl设计的样式-->

<DT>猫

<DD>一种可供饲养的小宠物。

<DT>蜥蜴

<DD>通常可在干燥区域发现的爬行动物。

</DL>

12.Bootstrap代码，bootstrap已经为有些标签设计好了样式。

<code> bootstrap已经为code标签设计好了样式，可以直接用

<pre> 把代码放到pre标签中，会出现灰色背景和圆角边框(bootstrap已经为pre标签设计好了样式)，

把代码放到bootstrap中还有一个好处：就是保持代码的排版格式。

13.Bootstrap Google Prettify(美化<pre>标签中代码)

使用google prettify可以让我们用pre标签标注的代码片段更漂亮一些，我们需要在网页当中加载使用google prettify，那么在code.google.com/p/google-code-prettify地址里面我们可以下载到它。下载后我们需要把prettify.js与prettify.css链接到我们的网页中

第一步：

<pre class="prettyprint linenums"></pre>

说明：prettyprint添加样式

      linenums在每行代码前面添加行号

第二步：

在body标签中我们需要添加onload属性

<body onload="prettyPrint()">

14.Bootstrap表格

<table class="table">   <!-- 使用bootstrap.css中的table样式，可以轻松实现当鼠标移到表格某一个行时，会高亮显示该行-->
<table class="table table-striped"> <!-- table-striped这个样式可以让我们的表格变成条纹的表格，奇数行与偶数行的背景颜色不一样了 -->
<table class="table table-striped table-boreder">   <!-- table-boreder 带边框-->
class="table-condensed" 可以压缩表格的内边距

 

15.Bootstrap表单

<label for="username">用户名</label> <!--for说明这个label专门为id="username"的元素准备的-->
<input type="text" id="username" placeholder="输入名的用户名" class="span3"><!--class是文本框所占宽度-->
<span class="help-inline">请输出您的姓名</span> <!--使用help-inline，Bootstrap可以添加行内的帮助文字，与input在同一行-->
<span class="help-block">请输出您的姓名</span> <!--使用help-block，提示信息也可以在inut下面--> 

 

16.Bootstrap文本框的前缀与后缀

文本框的前缀与后缀就是在文本框的前面或者后面添加一个元素(可以是文字，也可以是按钮)。

<div class="container">
   <h1 class="page-header">文本框的前缀与后缀</h1>
   <div  class="input-prepend input-append">
<!--"input-prepend"这个类是用在前缀元素上面。如果是后缀元素的话，我们需要用"input-append"-->
	<span class="add-on">$yen;</span><input type="text" /><span class="add-on">.00</span>
<!--"add-on"说明将span元素作为前缀或后缀。span标签与input标签要在同一行，而且他们之前不要添加空格。最后我们还要用一个class="input-prepend的div标签包围住"-->
	</div>
</div>

Bootstrap架构为按钮设计了很多的样式，这里我们使用一个默认的按钮样式btn

<div class="input-append">
<input type="text" /><button class="btn" type="button">搜索</button>
<!--使用btn样式-->
</div>

  17.Bootstrap单选按钮

18.Bootstrap复选框

.checkbox更好的显示复选框,这些样式都能在bootstrap.css中找到

.inline让同一组复选框显示在同一行

<label class="checkbox inline"><input type="checkbox" name="cms" value="gaoweigang">gaoweigang</input></label>

<label><input type="checkbox inline" name="cms" value="gaohongcheng">gaohongcheng</input></label>

<label><input type="checkbox inline" name="cms" value="pengchuanzhi">pengchuanzhi</input></label>

 

20.Bootstrap表单的排版

<div class="container>
 <form class="form-horizontal">
   <fieldset>
    <legend>用户登录</legend>
   <h1 class="page-header">表单</h1>
   <div class="control-groups">
   <label class="control-label" for="username">用户名</label>
   <div class="controls">
   <input id="username" type="text">
   <p class="help-block">请输出你想注册的用户名</p>
   </div>
   </div>
    <div class="control-groups">
   <label class="control-label" for="password">用户名</label>
   <div class="controls">
   <input id="password" type="password">
   <p class="help-block">请设置密码</p>
   </div>
   </div>
   </fieldset>
   <div class="form-action">
   <input type="submit" class="btn btn-primary">登录</input>
   </div>
 </div>

 

18.Bootstrap复选框 .checkbox更好的显示复选框,这些样式都能在bootstrap.css中找到 .inline让同一组复选框显示在同一行 <label class="checkbox inline"><input type="checkbox" name="cms" value="gaoweigang">gaoweigang</input></label> <label><input type="checkbox inline" name="cms" value="gaohongcheng">gaohongcheng</input></label> <label><input type="checkbox inline" name="cms" value="pengchuanzhi">pengchuanzhi</input></label>  

20.Bootstrap表单的排版

<div class="container>
 <form class="form-horizontal">
   <fieldset>
    <legend>用户登录</legend>
   <h1 class="page-header">表单</h1>
   <div class="control-groups">
   <label class="control-label" for="username">用户名</label>
   <div class="controls">
   <input id="username" type="text">
   <p class="help-block">请输出你想注册的用户名</p>
   </div>
   </div>
    <div class="control-groups">
   <label class="control-label" for="password">用户名</label>
   <div class="controls">
   <input id="password" type="password">
   <p class="help-block">请设置密码</p>
   </div>
   </div>
   </fieldset>
   <div class="form-action">
   <input type="submit" class="btn btn-primary">登录</input>
   </div>
 </div>

 

20.Bootstrap表单的排版

<div class="container>
 <form class="form-horizontal">
   <fieldset>
    <legend>用户登录</legend>
   <h1 class="page-header">表单</h1>
   <div class="control-groups">
   <label class="control-label" for="username">用户名</label>
   <div class="controls">
   <input id="username" type="text">
   <p class="help-block">请输出你想注册的用户名</p>
   </div>
   </div>
    <div class="control-groups">
   <label class="control-label" for="password">用户名</label>
   <div class="controls">
   <input id="password" type="password">
   <p class="help-block">请设置密码</p>
   </div>
   </div>
   </fieldset>
   <div class="form-action">
   <input type="submit" class="btn btn-primary">登录</input>
   </div>
 </div>