bootstrap 学习简记

Bootstrap学习笔记

1.普通样式

（1）<div class=”container”>  // 文本居中

（2）<div class=”row”> //row表示内容显示在同一行，页面为12个宽度的表格，

  <div class=”span4”>//每个表格占4个宽度

....

  </div>

  <div class=”span4”>//span4占4个宽度，里面还可嵌套row，row中的span和应该为4。

....

  </div>

  <div class=”span4”>

....

  </div>

</div>

（3）以上的container、row为固定布局，在其后面添加“-fluid”变为流动布局，会随页面大小变化而改变宽度。

（4） 响应式布局：@media (min-width:800px) and (manx-width:1000px){

body{background:#000;}

}//当页面宽度在800-1000像素之间的时候，页面会使用body布局，背景为黑色

（5）<div class=”visible-desktop”>....</div>//只在电脑模式显示该div，平板和手机不显示

类似类样式：visible-phone(手机),visible-tablet(平板) hidden-desktop hidden-phone....

（6）<abbr title=”Hello world”>HW</abbr>  //当HW为缩写的时候，使用abbr标签，当鼠标放置在HW上时，会显示hello world全称

（7）<blockquote>引用内容<small>来自<cite>百合网</cite></small></blockquote>

//引用内容右边会出现引用的竖杆，来自前面多出”---”(引用符号)

 

2.Bootstrap的表格

 

(1)普通表格： <table class=”table”>.....</table>

(2)条纹表格 <table class=”table table-striped”>....</table>

(3)带变宽的表格<table class=”table table-bordered”>...</table>

(4)压缩表格<table class=”table table-condensed”>...</table>//多种样式一起使用

3.表单

 

(1)<input type=”text’ placeholder=”提示内容”>

(1)<div class=”input-prepend input-append”>

<span class=”add-on”>$</span><input type=”text”><span class=”add-on”>.00</spann>

  </div>

4.导航路径

<ul class=”breadcrumb”>

   <li><a href=”#”>首页</a> <span class=”devider”>/</span></li>

   <li class=”active”>产品列表</li>

</ul>

5.分页器

(1)

<ul class=”pagination ”>

<li><a href=”#”>1</a></li>

<li class=”active”><a href=”#”>2</a></li>//当前页

<li><a href=”#”>3</a></li>

<li><a href=”#”>4</a></li>

</ul>

(2) <ul class=”pager”>

<li><a href=”#”>前一页</a></li>

<li><a href=”#”>后一页</a></li>

   </ul>

6.下拉列表

 

<label for=”somewhere”>想去的地方</lable>

<select id=”somewhere”>

<option value=”US”>美国</option>

<option value=”UK”>英国</option>

</select>

7.用户登录

    

8.按钮

 

（1）按钮样式列表：

（2）按钮尺寸：

<div style=”margin-bottom:15px;”>

<a class=” btn btn-primary btn-larger” href=”#”>

<i class=”icon-comment”></i>查看评论 //<i>定义小图标

</a>

</div>

9.查阅小图标

10.按钮排列

11.按钮下拉菜单

需要引入：

（1）

（2）需要引入：

12.导航栏

//导航菜单始终位于页面顶端

需要引入：

导航栏中包含下拉框：

需要引入：

页面设置为响应菜单：

13.选项卡

Class=”nav-tabs” -> class=”nav-pills”之后：

点击选项卡，显示不同相应内容：

改变选项卡标签至左边：

14.提示

15.网页显示图片

16.弹出对话框

17.提示信息

（1）鼠标放置，显示提示简单信息

（2）鼠标放置，显示提示完整信息

18.折叠内容

多个内容，每次展开一个

19.图片左右切换