bootstarp入门

第一章：概念，这货到底是什么？

它就是一个前端框架。提供了一些较漂亮的css样式和js库方便开发。
对于概念其实现在入门来说本人也不是特别理解，所以先稍微理解一下，等掌握再补充

第二章：如何开始

第一步：百度官网，下载包，放在项目下面。
第二步：引入css样式文件和js代码

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="bootstrap/js/jquery-3.1.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

官网上说还需要加三个meta定义

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1">

并且这三个meta标签必须位于第一位置，其他meta标签必须在这三个meta标签之后。
附上几个meta标签的解释

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

这个是文档兼容性的meta标签，Edge 模式告诉 IE 以最高级模式渲染文档。举一反三，content="chrome=1" 就是告诉chrome以最高模式渲染文档，这样可以避免因为浏览器版本升级带来的影响

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

这个是显示窗口的大小，width=device-width即宽度直接是显示器的宽度，也即满屏。initial-scale=1.0即页面以原本尺寸显示，如果1.0改为2.0即缩放两倍,user-scalable=no禁用缩放，这意味着用户只能滚动网页

第三章：css样式篇

1：按钮

要使用bootstarp的样式其实很简单。一个button元素加上指定的class属性就可以为你的按钮增添色彩了。
以下是参考class。在食用之前请确保你引入了bootstrap的css文件
（class属性从按钮大到小排序）
白色的按钮：
btn btn-lg btn-default

深蓝色的按钮：
btn btn-lg btn-primary
绿色的按钮：
btn btn-lg btn-success
水蓝色按钮
btn btn-lg btn-info
黄色按钮
btn btn-lg btn-warning
红色按钮
btn btn-lg btn-danger
按钮式链接
btn btn-lg btn-link
值得注意的是:如果你把btn btn-lg去掉，只留下最后几个的话，按钮的样式就不再具有动态性，变成了单纯只有颜色的按钮了。挺像打砖块的砖块？

2：表格

直接在table标签的class属性指定为table就可以做出一个漂亮的表格了
只带行线的表格 class：table
只带行线，首行线加粗 class:table table-condensed
纵横线都有的表格 class:table table-bordered
奇偶行不同的表格 class:table table-striped

3:标签

首先说一下，标签跟文本没什么不同，只不过长的挺妖艳贱货的
灰色标签 class：label label-default
深蓝色的标签 class：label label-primary
绿色的标签 class：label label-success
水蓝色 标签class：label label-info
黄色标签 class：label label-warning
红色标签class：label label-danger

4：列表

这种列表可以做很多事情，比如说在网站的右上方加一个列表，可以显示消息个数，菜单什么的，非常有用
使用框架提供的列表样式
1：ui的class属性设为 nav nav-pills
2：li里加超链接可以有一个不错的样式
3：另一个li标签的样式代码如下

<li class="active">
    <a href="#">Home <span class="badge">42</span></a>
</li>

这个看起来很像消息提示的超链接，42是消息数目
而且还带颜色。
不带颜色的代码如下

<li >
<a href="#">Messages <span class="badge">3</span></a>
</li>

5:表单样式化

表单样式化起来很简单
只要加进css样式文件，任何的input标签都有默认还不错的样式
文本框也一样，如

<textarea rows = “3” > </ textarea> 

圆角的输入框：class属性为：input-medium search-query
输入框前置文字

<div class="input-prepend">
        <span class="add-on">@</span>
        <input class="span2"  type="text" >
</div>

输入框后置文字

<div class="input-append">
  <input class="span2" id="appendedInput" type="text">
  <span class="add-on">.00</span>
</div>

输入框前后包围

<div class="input-prepend input-append">
  <span class="add-on">$</span>
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

输入框警告提醒，在输入框加个属性：required
PS：span文字标签也可以换为

<button class="btn" type="button">Go!</button>

这样可以做一个输入跳转的功能