bootstrap（自己的笔记）

最新推荐文章于 2024-10-15 17:38:27 发布

原创最新推荐文章于 2024-10-15 17:38:27 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了Bootstrap的基本使用方法，包括如何引入CSS和JS文件、响应式布局的实现方式、基本的CSS样式调整以及表格、表单等元素的应用。

前段时间看了bootstrap，样式比较多，现对之做一个简单的概括：

首先在使用bootstrap之前一定要把bootstrap的css和js包导入到我们的项目中，包下载地址：http://twitter.github.com/bootstrap/assets/bootstrap.zip；

全局设置

首先bootstrap是依赖于html5的，如果你使用html4，那么抱歉恐怕你不能使用bootstrap了。所以在html头文件中一定要加入这么一句：

<!DOCTYPE html>
<htmllang="en">
...
</html>

如果想使用bootstrap的样式可以直接在代码中调用class就可以了。例如：<p class="span2">

格式布局

bootstrap默认把浏览器一行平均分为12列。一列就是span1两列就是span2类似：span3,span4,span5,span6……span12

example:

<divclass="row">
<divclass="span4">...</div>
<divclass="span8">...</div>
</div>

默认的12列都是左对齐的。

如果想向右移动N列可以使用 .offset* classes.例如占用两列向右移动两列就是：class=".span2 .offset2 "

当然你也可以互相镶嵌，镶嵌直接在里面使用就可以了。例如：

<divclass="span9">
Level 1 column
<divclass="row">
<divclass="span6">Level 2</div>
<divclass="span3">Level 2</div>
</div>
</div>

表示.span6 和 .span3镶嵌在.span9里面。

Base CSS

basic code

<h1><h2>...<h6>已经更改，直接使用就可以了。

小字体：<small>

黑体：<strong>

斜体：<em>

柔体：<p class="muted">

警告：<p class="text-warning">

错误：<p class="text-error">

标记：<p class="text-info">

成功：<p class="text-success">

缩写：<abbr>

地址：<address>

引用：<blockquote>

右对齐：<blockquote class="pull-right">

描述：<dl><dt>...</dt><dd>...</dd></dl>

添加代码：<code>

Tables

默认table：

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table">
  …
</table>

table有边界：.table-bordered

颜色可以添加：.success.error.warning.info

forms

标签：<input type="text" placeholder="">

按钮：<class="btn">

搜索框：<class="input-medium search-query">

表单垂直对齐：class="form-horizontal"

组：class="control-group"

文本框：<textarea>

附加框：class="add-on"

buttons

class="btn btn-info btn-primary

images

略

icons

略

组件

下拉框

下拉菜单中的子菜单：.dropdown-submenu

按钮组：.btn-group

导航栏：.nav-tabs .action(默认选项) .disabled(不可选择项)

<ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
</ul>
</li>
</ul>

页码显示

class="pagination disabled active"

弹出框

<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
</div>

进度条

class="progress"

特效：.progress-striped .progress-striped .progress-info .progress-success .progress-warning .progress-danger