bootstrap

1.jquery要在Bootstrap之前引用 

2.在之前对各个设备的宽度引用，viewport控制网页的大小和缩放。初始化移动浏览器的宽度（<meta name=”viewport” content=”width=device-width ,initial-scale=1”。

3.内容

  Class

  lead突出段落P

颜色

  .text-muted:提示浅灰色

  .text-primary主要蓝色

  .text-success成功浅绿色

  .text-info通知信息浅蓝色

  .text-warrning警告 黄色

  .text-danger危险 褐色

文本对齐方式

  .text-left/right/justify(两端对齐)/center

列表去样式

  .list-unstyle

 还垂直列表到水平列表

   .list-inline

定义列表dl{ dt{dd

代码

  <code>一行代码

<pre>块代码 class  .pre-scrollable 设置代码块的最大高度，340px.超过这个高度酒出现滚动条

<kbd>用户输入

表格的类型

.table基础表格

.table-striped 斑马线表格

.table-bordered带边框的表格

.table-hover鼠标悬停高亮的表格

.table-condensed紧凑型表格

.table-responsive响应式表格

Tr 对应类的颜色不同

.active表示当前活动

.success表示成功

.info表示中立

.warning表示警告

.danger危险或错误

表单

 水平的表单 <form class=”form-horizontal”>

  <div  class=”form group”>

<lable for=”name”  class=”col-sm-2”>姓名</lable>

<div class=”col-sm-10”>

  <input type=”text” class=”form-control” id=”name” placeholder=”please input name “>

<div>

</div>

Form-control是焦点状态。即获得焦点时的状态 （输入都可用）

Disabled 与form-control同用表示不可用状态<fieldset /input/   disabled>

这是一个表单组

内敛表单 .form-inline 所有的表单在一行显示

复选框和单选按钮的水平排列 .checkbox-inline  .radio-inline

Button 的样式  class=”btn btn-info/btn-success/btn-warning/btn-danger/btn-primary/btn-link.不仅在button中使用，在input和a中也可用

按钮的大小  .btn-xm  .btn-sm .btn-lg

块状按钮，是按钮充满父元素.btn-block

按钮的禁用状态disabled

控件的大小 .input-lg大  .input-sm小

表单的验证 .has-warning  .has-error  .has-success 直接在form-group容器上对应添加状态名  has-feedback 状态名下添加对应的icon

表单的提示信息 <span class =”help-block”>信息错误</span>

  Help-block表示在控件底部显示 help-inline在空间一行显示

img的状态

 img-responsive：响应式图片；img-rounded：圆角图片；img-circle：圆形图片；img-thumbnail：缩略图片

图标

200 个icon

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

glyphicon这个公司提供的图标

栅格网格

<div class="container">

  <div class="row">

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

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

  </div>

</div>