bootstrap代码块（bootstrap经典案例源码）

今天给各位分享bootstrap代码块的知识，其中也会对bootstrap经典案例源码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、使用bootstrap的原因是什么
• 2、使用bootstrap怎么制作出这种样式的排版？
• 3、如何学习bootstrap框架

使用bootstrap的原因是什么

1.节省时间

利用Bootstrap，你将有更多的时间用来挣钱。Bootstrap库中包含很多现成的代码片段，这些代码可为你的网站增加更多活力。Web开发者不必再花费时间、费力地编码，只需找到合适的代码，插入到合适位置即可。此外，CSS利用LESS编写，很多样式和设计都已设计完成。

2.定制化

Bootstrap很重要的一方面就是你可以将它据为己有。你可以留取框架中需要的部分，抛弃不需要的。Bootstrap整体允许你根据自己的需要，裁剪自己开发的项目。

3.设计方面的因素

网格系统

对页面进行布局时，往往需要有一个合适的网格。你不一定使用该平台的网格，但它确实能大大降低你工作的难度。默认模式下，该平台提供一个16列的网格（宽为960px）。每列宽40px，每列左右两侧具有10px的间隙，各网格最外侧均留出20px的空白。你可以根据需要改变行数与间隔大小。样式已开发完成，开发者只需要把合适的代码放入HTML合适的位置即可。

LESS

LESS在开发周期内应用很广。它是一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大。你可以利用LESS的Mixins及CSS操作定制内嵌网格。Bootstrap采用了大量流行的CSS3功能，可以对所有的网站提供统一的浏览体验。

JavaScript

Bootstrap提供JavaScript库，该库超越了基本的架构与样式。通过Bootstrap，开发者可轻易地操作窗口警告框、工具提示框、滚动条、按钮等。Bootstrap最突出之处是，它可以让你不必再费神费力地写脚本。

4.一致性

Twitter当初开发该工具的最主要原因是，开发者所开发项目在不同浏览器间的不一致性。这就导致了很多前端开发与最终用户界面之间的问题。Bootstrap保证了界面在不同平台上的统一性。在IE、Chrome及Firefox中，你可以看到统一的界面。

5.保持持续更新

以jQuery 的UI为例：每一年更新一次。而Bootstrap则在不停地改进，更具规律性与持续性。Web开发者一发现新问题， Bootstrap团队便立刻着手修复它。

6.易于集成

如果你想进一步完善一个已完成的网站，Bootstrap可以帮助你。例如，如果你要统一使用自己编写的表格样式，你要做的是把你的样式复制到CSS样式文件中。Bootstrap将立即剔除它本身的样式，在这里，你需要将该文件与Twitter进行关联。集成的过程十分简单、方便、快捷。完成之后，你便可以把你的设计应用到你的核心内容上。

7.响应式

Bootstrap为响应式框架。无论你的开发工作从笔记本转移到iPad，还是从iPad转移到Mac上，你都不用为你的工作而苦恼。因为Bootstrap能以超快的速递与效率适应不同平台间的差异。

8.对未来技术具有兼容性

Bootstrap包含很多特殊元素，如HTML5和CSS3，这些元素被称为设计的未来。因为该框架考虑到设计和开发的未来，它很有潜力成为未来几年里Web开发者的参考标准。

9.竞争力

Bootstrap并不是唯一的前端开发框架，比如还有JQuery UI、HTML5 Boilerplate等等。但对于Bootstrap来说，真正的竞争对手是Zurb Foundation。Bootstrap 2新增加了一个工具集，Foundation经过好长时间才填补上。Bootstrap包含大量的第三方插件、主题、功能特性、代码等等，而Foundation并不具备这些。

10.详尽的说明文档

Bootstrap的文档相当精彩。大部分新平台往往没有合适的说明文档，而Bootstrap的说明文档大大帮助了我们的入门学习。通过文档可以找到我们需要的所有信息。

11.让老板们受益

学习Bootstrap，并不会花费你太多时间，因为它将所有的模块化方法与体系结构封装在了一起。从老板的角度来看，如果你为Web开发者提供了Bootstrap框架，那么他们会节省更多的学习时间，并快速投入到工作中。这会为老板们带来更好的收益。

使用bootstrap怎么制作出这种样式的排版？

Bootstrap之页面排版样式

Bootstrap

是由

Twitter

公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript

的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于

PC

及移动端设备的

Web

页面需求。

1.

Bootstrap

特点

Bootstrap

非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：

(1).

跨设备、跨浏览器，可以兼容所有现代浏览器，包括比较诟病的

IE7、8。

(3).

提供的全面的组件，Bootstrap

提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。

(4).

内置

jQuery

插件，Bootstrap

提供了很多实用性的

jquery

插件，这些插件方便开发者实现

Web

中各种常规特效。

(5).

支持

HTML5、CSS3，HTML5

语义化标签和

CSS3

属性，都得到很好的支持。

(6).

支持

LESS

动态样式，LESS

使用变量、嵌套、操作混合编码，编写更快、更灵活的

CSS，它和

Bootstrap

能很好的配合开发。

2.

引入Boostrap

//第一个

Bootstrap

!DOCTYPE

html

html

head

meta

charset="UTF-8"

titleBootstrap/title

link

rel="stylesheet"

href="css/bootstrap.min.css"

rel="external

nofollow"

/head

body

button

class="btn

btn-info"Bootstrap/button

script

src="js/jquery.min.js"/script

script

src="js/bootstrap.min.js"/script

/body

/html

3.

Boostrap的排版样式

页面主体

Bootstrap

将全局

font-size

设置为

14px，line-height

行高设置为

1.428(即

20px)；

段落元素被设置等于

1/2

行高(即

10px)；颜色被设置为#333。

设置文本对齐

Bootstrap

框架

//居左

Bootstrap

框架

//居中

Bootstrap

框架

//居右

Bootstrap

框架

//两端对齐，支持度不佳

Bootstrap

框架

//不换行

设置英文文本大小写

Bootstrap

框架

//小写

Bootstrap

框架

//大写

Bootstrap

框架

//首字母大写

缩略语

Bootstrapabbr

title="Bootstrap"框架/abbr

地址文本

//设置地址，去掉了倾斜，设置了行高，底部

20px

address

Twitter,

Inc.

795

Folsom

Ave,

Suite

600

San

Francisco,

CA

94107

abbr

title="Phone"P:/abbr

(123)

456-7890

/address

引用文本

//默认样式引用，增加了做边线，设定了字体大小和内外边距

blockquoteBootstrap

框架/blockquote

//反向

blockquote

class="blockquote-reverse

"Bootstrap

框架/blockquote

列表排版

//移出默认样式

ul

liBootstrap

框架/li

liBootstrap

框架/li

liBootstrap

框架/li

liBootstrap

框架/li

liBootstrap

框架/li

/ul

//设置成内联

ul

liBootstrap

框架/li

liBootstrap

框架/li

liBootstrap

框架/li

liBootstrap

框架/li

liBootstrap

框架/li

/ul

//水平排列描述列表

dl

dtBootstrap/dt

ddBootstrap

提供了一些常规设计好的页面排版的样式供开发者使用。/dd

/dl

代码

codesection/code

//内联代码

press

kbdctrl

+

,/kbd

//用户输入

pre

Please

input...

/pre

//代码块

此外，Bootstrap

还列举了var表示标记变量，samp表示程序输出，只不过没有重新复写

CSS。

一、段落

段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：

1、全局文本字号为14px(font-size)。

2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。

3、颜色为深灰色（#333）；

二、文字样式

在实际项目中，对于一些重要的文本，希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。

如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

1.粗体：在Bootstrap中，可以使用b和

标签让文本直接加粗。

2.斜体：在Bootstrap中，可以使用em或i来实现文本斜体。

三、强调类

.text-muted：提示，使用浅灰色（#999）

.text-primary：主要，使用蓝色（#428bca）

.text-success：成功，使用浅绿色(#3c763d)

.text-info：通知信息，使用浅蓝色（#31708f）

.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

div

class="text-muted".text-muted

效果/div

div

class="text-primary".text-primary效果/div

div

class="text-success".text-success效果/div

div

class="text-info".text-info效果/div

div

class="text-warning".text-warning效果/div

div

class="text-danger".text-danger效果/div

效果如下：

四、文本对齐

在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：

☑

左对齐，取值left

☑

居中对齐，取值center

☑

右对齐，取值right

☑

两端对齐，取值justify

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：

☑

.text-left：左对齐

☑

.text-center：居中对齐

☑

.text-right：右对齐

☑

.text-justify：两端对齐

有了文字样式，使得排版效果更清晰简洁，希望大家在自己的作品中多使用一些简单大方的文字样式，使作品脱颖而出，更加具有吸引力。

如何学习bootstrap框架

全局样式

1

Bootstrap 中用到一些 HTML元素和CSS属性需要将页面设置为 HTML5 文档类型，即在页面顶部添加“!DOCTYPE html”

2

布局容器：Bootstrap 需要为页面内容和栅格系统包裹一个 .container或container-fluid（占据全部视口viewport的容器）容器。

3

栅格系统，Bootstrap 提供了一套最多12列的流式栅格系统，通过 .row表示行 和 .col-xs-4 这种表示宽度的列快速创建栅格布局。

4

Bootstrap 排版、链接样式设置了基本的全局样式。

font-size 设置为 14px，line-height 设置为 1.428。

p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

基础样式

【排版】，

1. 标题，可以用来.h1 到 .h6 类给内联属性的文本赋予标题样式，标题内通过small 标签或带.small 类的元素标记副标题。

主体文本：.lead 类让段落突出显示。

2. 内联文本，使用mark 标签表示标注文本，del删除，s无用，ins插入，u下划线，small小号（父容器字体大小的 85%），strong着重，em斜体。

3. 文本对齐类，text-left，text-center，text-right，text-justify，text-nowrap

4. 文本大小写类，text-lowercase，text-uppercase，text-capitalize

5. 缩略语类，为 abbr 元素设置 title属性并使用.initialism 类让 font-size 变得稍微小些。例：abbr title="attribute" class="initialism"attr/abbr

6. 地址，以日常使用的格式呈现，在行结尾加 br 保留需要的样式即可。

7. 引用，将 HTML 元素包裹在 blockquote 中即可表现为引用样式。对于直接引用，建议用 p 标签。

8. 列表，list-unstyled类移除默认 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。list-inline类通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。dl-horizontal类让 dl 内的短语及其描述排在一行。

【代码】

code 标签包裹内联样式的代码片段，

kbd 标签标记用户通过键盘输入的内容，

pre 展示代码块 。可用pre-scrollable 类设置最高350px带垂直滚动条。

var 标签标记变量，

samp 标签标记程序输出的内容。

【表格】

.table 类指定基本样式，

.table-striped 条纹样式，

.table-bordered 类为边框样式，

.table-hover 类带鼠标悬停样式，

.table-condensed 类紧凑样式。

状态类(行或单元格设置颜色)：active，success，info，warning，info。

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其

响应式表格: 会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

【表单】

1. 基本实例，所有设置了 .form-control 类的 input、textarea 和 select 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

不要讲表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

form-group，input-group，control-group，

2. 内联表单，form 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

在内联表单中单选/多选框控件的宽度设置为 width: auto;

如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置 .sr-only 类将其隐藏。

3. 水平排列的表单

通过为表单添加 .form-horizontal 类改变 .form-group 的行为，使其表现为栅格系统中的行（row）

4. 多选和单选框

.radio、.radio-inline、.checkbox、.checkbox-inline 。

5. 静态控件

水平布局的表单中，如需将一行纯文本和 label 元素放置于同一行，为 p 元素添加 .form-control-static类即可。

6. 控件状态

.disabled类禁用控件，为fieldset 设置disabled 时则禁用包含的所有控件。

a标签不受此类影响。

readonly 属性可以禁止用户输入

.has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

你还可以针对校验状态为输入框添加额外的图标（注意依赖于label标签）。只需设置相应的 .has-feedback 类并添加正确的图标即可。

7. 控件尺寸

通过 .input-lg .input-sm类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度

通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

8. 辅助文本

help-block类，针对表单控件的“块（block）”级辅助文本。

【按钮】

1. 基本样式，btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active

2. 展现形式，btn-link、btn-block、close

3. 尺寸样式，.btn-lg、.btn-sm 、.btn-xs 。

可通过 a、button 或 input 元素应用按钮类，但建议用 button 元素来获得在各个浏览器上获得相匹配的绘制效果。

6

【图片】

图片形状，img-rounded，img-circle，img-thumbnail，IE8 不支持 CSS3 中的圆角属性。

7

【辅助】

text-muted、text-primary、text-success、text-info、text-warning、text-danger

bg-primary、bg-success、bg-info、bg-warning、bg-danger、

三角符号，caret

浮动

居中

组件样式

【图标】

200个来自 Glyphicon Halflings 的字体图标，

图标类只能应用在空元素上，且不可与其它组件联合使用。

span class="glyphicon glyphicon-search"/span

【菜单】

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里

菜单对齐：默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐

菜单分组：dropdown-header表描述项，.disabled 表禁用项

向上弹出： .dropup 类就能使触发的下拉菜单朝上方打开

【按钮组】

按钮组.btn-group，通过.btn-group-* 指定组中按钮尺寸。

按钮栏.btn-toolbar

钮垂直堆叠排列显示btn-group-vertical

两端对齐排列的按钮组btn-group-justified

【导航】

标签页.nav-tabs 类依赖 .nav 基类。

胶囊式标签页.nav-pills 类，添加 .nav-stacked 类改为垂直堆叠。

.nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。

navbar navbar-default

对于不包含在 form 中的 button 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。

将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，

.navbar-text

.navbar-link

.navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。

.navbar-fixed-top 类可以让导航条固定在顶部

.navbar-fixed-bottom 类可以让导航条固定在底部

.navbar-static-top 类可让导航条随着页面向下滚动而消失。

.navbar-inverse 类可以改变导航条的外观。

breadcrumb 创建带有层次的导航结构（面包屑）。

【分页】

pagination，并根据情况对页码使用.disabled 类、 .active 类。

.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。

pager上一页和下一页的简单翻页。并可通过previous，next类标示。

【标签】

label标签基类，可通过label-default, label-primary, label-success, label-info, label-warning, label-danger改变标签的外观。

badge，可以很醒目的展示新的或未读的信息条目。

7

【其它】

缩略图

提示框

进度条

媒体对象等

定制样式

1

BootStrap提供了根据自己需要的组件及jquery插件进行定制，使用者也可以直接修改Less源码。

END

总结

1

本篇经验仅从全局简单介绍Bootstrap的内容，细节部分并不具体，Bootstrap的使用非常灵活，可以对各种组件进行合并使用（如：为标签页项 添加带下拉菜单），建议使用过程中实时参考官方文档，官方文档有更详细的下载及使用说明，针对具体样式有直观样例，而且有丰富的主题案例。

bootstrap代码块的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于bootstrap经典案例源码、bootstrap代码块的信息别忘了在本站进行查找喔。