bootstrap样式的整理

最新推荐文章于 2026-07-07 17:29:03 发布

原创最新推荐文章于 2026-07-07 17:29:03 发布 · 7.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

twitter

css

bootstrap

本文介绍了在实际项目中使用Bootstrap前端工具包的心得体会，详细记录了基本样式的学习过程，包括字体排版、表格、表单及按钮等组件的样式设置。

Bootstrap基本样式学习笔记

最近在项目中开始试用twitter的前端工具包bootstrap，目前只应用了它的css class，真的挺好用的，效果很清新，感觉很不错。在浏览basecss介绍时随便做了些笔记，故发篇blog以作备份，图片的效果应该没有官方地址清晰，这里附上传送门http://twitter.github.com/bootstrap/

传图太麻烦了。。放弃。。

一、字体排版Typography

<address>:一般是斜体，在bootstrap中为正体，对比如下：

图1 bootstrap<address>

图2nobootstrap<address>

还有<abbr>、<strong>之类，此部分简单跳过

<ul>：bootstrap提供了左对齐效果

二、code

多个code元素如果要排版，可以用<pre></pre>来包裹，因为pre 元素可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符而文本也会呈现为等宽字体。

三、table

语法:

样式选项:

class	name	description
None	默认	没有样式
.table	基本	只有水平分隔线
.table-bodered	带边框	边框环绕
.table-striped	奇数行加色	奇数行加色即隔行变色，这里bootstrap定义的变色为f9f9f9,较淡，可手动改为更明显的color
.table-condensed	压缩	所有td/th缩半，Padding从8px->4px

效果图如下：

图3.1 table

图3.2table-striped

图3.3table-bordered

图3.4table-condensed

图3.5 combinethem all

四、Forms 表单

The best partabout forms in Bootstrap is that all your inputs and controls look great nomatter how you build them in your markup. No superfluous HTML is required, butwe provide the patterns for those who require it.

More complicatedlayouts come with succinct and scalable classes for easy styling and eventbinding, so you're covered at every step.

不论你表单代码如何，Bootstrap关于表单的样式都展现很好。他们提供的模式不需要任何多余的html代码。更多复杂的布局都有简洁的可扩展的简易风格和绑定事件提供。

Bootstrap comeswith support for four types of form layouts:

Vertical (default)

Inline

Horizontal

Different typesof form layouts require some changes to markup[S1] , but the controls themselves remain and behave the same.

不同的布局会要求修改部分代码，不过控件的展示还是保持不变。

1、表单布局

class	name	dscription
.form-vertical	Vertical (default)	Stacked, left-aligned labels over controls 堆放、label左对齐
.form-inline	Inline	Left-aligned label and inline-block controls for compactstyle Label左对齐，把所有控件压缩到一行里
.form-search	Search	典型的搜索风格，输入框带有圆角
.form-horizontal	Horizontal	Float left, right-aligned labels on same line as controls