初学BootStrap的一些感悟

  

  BootStrap是一款前段开发的框架技术，简单，灵活的特性。使得成为了当下比较流行的用于搭建Web页面的HTML,CSS,JavaScript的工具集。

  要使用BootStrap首先应该下载相关的组件框架，因为BootStrap中的Js插件依赖于JQuery，因此JQuery要在BootStrap之前引用。

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

  刚开始学习使用的，可以去 BootStrap的官方网站复制相关的模板，可以确保使用前准备的万无一失。

还用一点要提一下，BootStrap并不支持IE8及更低的版本，所以在使用前请确保浏览器的版本不要太过陈旧，做好及时的更新。

————BootStrap基础部分。

 1.标题

  元素：<h1>~<h6>大小从低到高

1.1副标题

  ex:<h1>主标题<small>副标题</small></h1>

2.段落

ex:<p></p>

2.1段落中的强调内容

ex：<p class="lead">强调内容</p>

3.<div>中强调

ex:<div class="text-muted">文本显示浅灰色</div>

     <div class="text-primary">文本显示蓝色</div>

4.文本对齐风格

  ex:<p class="text-left">居左<p>

       <p class="text-right">居右</p>

       <p class="text-justify">两端对齐</p>

5.列表去点

 ex:<ul class="list-unstyled"></ul>

以上是我对于BootStrap与不同Html标签的区别的大致总结，肯定有不足。

6.水平表单

在BootStrap框架中要实现水平的效果，必须要满足以下两个条件。

（1）<form>元素是用的类名应该是"form-horizontal"

  (2)配合BootStrap框架的网格系统

6.1表单控件(input)

<input type="email" class="form-control" placeholder="enter email">

6.2表单控件(按钮)

在BootStrap框架中的按钮都是采用<button>来实现的

<button class="btn" href="#">确定</button>

6.3表单控件的大小

input-sm:比正常的小

input-lg：比正常的大

<input class="form-control input-sm" type="text">

6.4表单控件(禁用状态)

只需要在相应的标签里添加相关的属性：disabled

<input class="form-control" disabled type="text">

6.5表单控件状态(验证状态)

1.has-warning:警告状态

2.has-error:错误状态

3.has-success:成功状态

<div class="form-group has-error"></div>

6.6图像

BootStrap对于图像的样式风格提供了以下几种

1.img-responsive:响应式图片

2.img-rounded:圆角图片

3.img-circle:圆形图片

4.img-thumbnail:缩略图片

ex:<img class="img-circle" alt="140*140">

7.图标

BootStrap框架为大家提供了近200个不同的icon图片,具体的内容可以去BootStrap官网上去看。在这里不做一一阐述。但务必要注意在使用图标icon之前应先加载相应的CSS。

ex:<span class="glyphicon glyphicon-search"></span>

8.网格系统

网格系统可以说是BootStrap整个框架系统中的核心部分，要使用框架系统必须理解工作原理

1.数据行(row)必须包含在容器(container)中，以便为其赋予合适的对齐方式

2.在行(row)中可以添加列(column),但列数之和不能超过平分的总列数，默认为12.

<div class="container">

  <div class="row">

    <div class="col-md-4"></div>

   <div class="col-md-8"></div>

</div></div>

BootStrapk框架的网格系统有四种基本的用法。

1.ExtraSmallDevicesPhones(<768px):col-xs-

2.SmallDevicesTablets(>=768px):col-sm-

3.MediumDevicesDesktops(>=992px);col-md-

4.LargeDevicesDesktops(>=1200px):col-lg-