BootStrap入门教程

格式：doc
大小：1.76 MB
文档页数：45

下载文档原格式

bootstrap基础教程案例代码

一、概述Bootstrap是一个用于快速开发响应式网页的前端框架，其具有易用性和功能丰富的特点，广泛应用于各种网页开发中。

本文将介绍Bootstrap的基础教程以及相关案例代码，帮助读者快速掌握Bootstrap的使用方法。

二、Bootstrap基础教程1. 栅格系统Bootstrap基于12列的栅格系统，可以轻松实现页面布局。

以下是一个简单的例子：```html<div class="cont本人ner"><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div></div></div>```在这个例子中，页面被分成了三列，每一列占据了页面宽度的1/3。

2. 响应式工具类Bootstrap提供了一系列的响应式工具类，可以根据不同的屏幕尺寸来显示或隐藏元素。

要在小屏幕设备上隐藏一个元素，可以使用`d-none d-sm-block`类：```html<div class="d-none d-sm-block">在小屏幕设备上隐藏该元素</div>```3. 按钮Bootstrap提供了丰富的按钮样式，可以轻松地创建不同风格的按钮。

以下是一个简单的例子：```html<button type="button" class="btn btn-primary">Primary按钮</button><button type="button" class="btn btn-secondary">Secondary按钮</button>```4. 表格使用Bootstrap可以轻松创建各种样式的表格。

BootStrap入门教程（一）之可视化布局

BootStrap⼊门教程（⼀）之可视化布局HTML模板：<!DOCTYPE html><html><head><title>Bootstrap 模板</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head><body><h1>Hello, world!</h1><script src="https:///jquery.js"></script><script src="js/bootstrap.min.js"></script></body></html> 在这⾥，您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css ⽂件，⽤于让⼀个常规的 HTML ⽂件变为使⽤了 Bootstrap 的模板。

Bootstrap5入门教程

Bootstrap5入门教程Bootstrap 是一个强大的前端框架，用于更快、更轻松地进行Web 开发。

Bootstrap 使我们能够以更少的工作量创建灵活且响应式的Web 布局。

Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。

它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。

Bootstrap 最初是由Twitter 的一名设计师和一名开发人员于2010 年年中创建的。

在成为开源框架之前，Bootstrap 被称为Twitter Blueprint。

使用 Bootstrap 的优势如果您对其他前端框架有一定的使用经验，您可能想知道是什么让 Bootstrap 如此特别。

以下是 Bootstrap 框架的一些优势：•节省大量时间——可以使用Bootstrap 预定义设计模板和类，从而节省大量时间和精力，并专注于其他开发工作。

•响应式功能—使用Bootstrap，您可以轻松创建响应式网站，这些网站在不同设备和屏幕分辨率上显示得更合适，而无需更改标记。

•一致的设计——所有Bootstrap 组件通过一个中央库共享相同的设计模板和样式，因此您的网页的设计和布局将保持一致。

•易于使用——Bootstrap 非常易于使用。

任何具有 HTML、CSS 和 JavaScript 基本知识的人都可以开始使用 Bootstrap 进行开发。

•与浏览器兼容——Bootstrap 是为现代网络浏览器创建的，它与所有现代浏览器兼容，如Chrome、Firefox、Safari、Internet Explorer 等。

•开源- 最好的部分是，它可以完全免费下载和使用。

阅读本教程前，您需要了解的知识：在开始阅读本教程之前，你必须具备 HTML 、 CSS 和 JavaScript 的基础知识。

Bootstrap3基础教程03导航栏

Bootstrap3基础教程03导航栏Bootstrap导航栏创建⼀个默认的导航栏的步骤如下：1.向 <nav> 标签添加 class .navbar、.navbar-default。

2.向上⾯的元素添加 role="navigation"，有助于增加可访问性。

3.向 <div> 元素添加⼀个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。

这会让⽂本看起来更⼤⼀号。

（⼿机端的导航按钮放在这⾥，然后通过⼀个容器隐藏导航项）4.为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的⽆序列表即可。

（⽤⼀个class containter 包裹导航居中）<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/><link href="Script/Style.css" rel="stylesheet"/><title></title></head><body><div class="container"><nav class="navbar navbar-inverse navbar-fixed-top"><div class="navbar-header"><a href="#" class="nav navbar-brand"><strong>logo</strong></a><button type="button" class="navbar-toggle" data-toggle="collapse"data-target="#target"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><div class="collapse navbar-collapse " id="target"><ul class="nav navbar-nav"><li class="active"><a href="#">课程</a></li><li><a href="#">博客</a></li><li><a href="#">⼿册</a></li></ul></div></nav></div><script src="Script/2.1.1jquery.min.js"></script><script src="bootstrap/js/bootstrap.min.js"></script></body></html>响应式的导航栏1.将要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中.2.折叠起来的导航栏实际上是⼀个带有 class .navbar-toggle 及两个 data- 元素的按钮。

Bootstrap每天必学之栅格系统（布局）

Bootstrap每天必学之栅格系统（布局）1、栅格系统（布局）Bootstrap内置了⼀套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视⼝（viewport）尺⼨的增加，系统会⾃动分为最多12列。

我在这⾥是把Bootstrap中的栅格系统叫做布局。

它就是通过⼀系列的⾏（row）与列（column）的组合创建页⾯布局，然后你的内容就可以放⼊到你创建好的布局当中。

下⾯就简单介绍⼀下Bootstrap栅格系统的⼯作原理：⽹格系统的实现原理⾮常简单，仅仅是通过定义容器⼤⼩，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强⼤的响应式⽹格系统。

Bootstrap框架中的⽹格系统就是将容器平分成12份。

在使⽤的时候⼤家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，当然你也可以分成更多，但不建议这样使⽤）。

2、使⽤规则Bootstrap内置了⼀套响应式、移动设备。

1、数据⾏(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐⽅式和内距(padding)。

如：<div class="container"><div class="row"></div></div>2、在⾏(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，⽐如12。

如：<div class="container"><div class="row"><div class="col-md-4"></div><div class="col-md-8"></div>3、具体内容应当放置在列容器（column）之内，⽽且只有列（column）才可以作为⾏容器(.row)的直接⼦元素4、通过设置内距（padding）从⽽创建列与列之间的间距。

Bootstrap入门与布局教程课件

实现原理
通过定义容器的大小，平分为12份调整内外边距结合媒体查询
9/44
栅格系统工作原理
一行数据（row）必须包含在 .container中浏可，览视以器区域便为
其赋予合容适器 c的ont对aine齐r 方式和内列与边列距间距 30px 使用行在水平方向列创colu建mn一组列
列右间距
4/44
新手入门开发环境（webstorm）引入Bootstrap框架文件
压缩处理文件bootstrap.min.css，bootstrap.min.js 使用 Bootstrap 中文网提供的免费 CDN 加速服务
5/44
基本模板
<html>

<head lang="en">
示例
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0/>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>这是一个Bootstrap框架的最基本HTML模板</h1>
<script src="js/jquery-1.12.4.js"></script>
</div>
演示示例3：Bootstrap列偏移
13/44
列嵌套
使用列组合的方式如何布局？
示例

bootstrap 步骤

bootstrap 步骤
Bootstrap的使用步骤如下：
1.创建文件夹：按照以往的习惯创建文件夹。

2.下载Bootstrap：在官网下载压缩包，选择下载生产环境的压缩包，将
其解压到项目目录下，但是不能覆盖你自己建的文件夹。

3.创建html骨架结构：先正常搭建一个html页面，然后再选中“基础模
板”中的所需代码，复制到你自己搭建的html页面中。

4.引入相关样式文件：使用link标签引入css文件，这里以min.css为
例。

5.书写内容：正常输入内容，如果发现内容没有了浏览器默认的内外边
距，则证明css文件引入成功。

6.使用：这里使用按钮为例。

在全局css中选中按钮，根据预定义样式选
中你所需要的css按钮样式，然后复制对应的代码到你搭建好的
Bootstrap结构中并允许查看成功与否。

请注意，以上步骤是使用Bootstrap的基本步骤，但具体实现会根据具体的应用场景和需求有所变化。

bootstrap响应式网站开发实例教程课件第3章第1节

</div>
<div class="row"> <div class="col-md-8">占8列</div> <div class="col-md-4">占4列</div>
</div>
<div class="row"> <div class="col-md-6">占6列一半</div> <div class="col-md-6">占6列一半</div>
中型设备台式电脑（≥992px）
以折叠开始，断点以上是水平的
970px
.col-md12
~78px 30px 列的两侧分别 15px Yes Yes Yes
大型设备台式电脑（≥1200px）
以折叠开始，断点以上是水平的
1170px
.col-lg12
~95px 30px 列的两侧分别 15px Yes Yes Yes
B o o t s t r a p 栅格系统 - - Bootstrap栅格系统的原理
运行“实例1”的页面效果，拖动浏览器改变浏览器的宽度，可以看到不同的效果。当屏幕<992px后，所有的列变成从上到下依次排列，在浏览器的宽度为 800px 和 600px呈现的效果是一样的，如图3-4所示。
a)
图3-4 应用栅格系统布局网站的效果 b）
a) 宽度为800px时的页面效果 b）宽度为600px时的页面效果
B o o t s t r a p 栅格系统 - - Bootstrap栅格系统的原理

bootstrap基础

第1章Bootstrap简介1-1 Bootstrap简介1、BootStrp是简单灵活用于搭建Web页面的HTML、CSS、JavaScript的工具集、整体形成前端开发框架2、基于html5、css3的bootstrap，具有大量诱人的特性：（1）漂亮的设计（2）友好的学习曲线；（3）卓越的兼容性；（4）12列栅格；（5）响应式设计；（6）样式向导文件；3、自定义JQuery插件，完整的类库，基于less等。

1-2 Bootstrap到底是什么？如上。

1-3 如何开始使用Bootstrap<!DOCTYPE html>html5定义<meta http-equiv="X-UA-Compatible" content="IE=edge">在IE运行最新的渲染模式<meta name="viewport" content="width=device-width, initial-scale=1">初始化移动浏览器----可以通过平移或者缩放浏览器，来看网页的布局，网页中这句代码基本上都会加上viewport：网页开发者来控制视口的大小和缩放width=device-width：宽度等于设备的宽度initial-scale=1：初始缩放的比例，这里为1，就是不缩放移动浏览器是把页面放在一个虚拟的视口中，即viewport，通常这个虚拟的视口比屏幕宽，这样就不用把每个网页挤到很小的视口中，但是这样会破坏没有针对移动浏览器优化的网页布局)（viewport可用于控制大小及缩放）（代码可理解为让视口的宽度为物理设备上真实的分辨率，即宽度，初始的缩放比例为1，即不缩放）bootstrap 3 之后，不再支付IE7，FF 3.X虽然支持IE8,但是IE8对CSS3支持有限，需要引入其他JS文件使IE8更好的支持通常，css文件声明放在head部分，jquery和bootstrap插件声明放在body的最下面；bootstrap基于jquery，所以jquery要先引入。

bootstrap中文手册指南

Bootstrap简易指南看完使用手册后所作的笔记，可以当做简易使用指南使用。

1.框架1.1全局样式使用HTML5的doctype，scaffolding.less中定义全局样式，从2开始使用normalize.css，并使用reset.less进行简化1.2默认栅格系统940px宽12列栅格，使用row与span[NUM]的class来控制，使用offset[NUM]来控制偏移，于non-fluid可以直接嵌套，提供了四种响应式方案1.3流动栅格系统基于百分比，将row改为row-fluid即可使用，内嵌注意宽度是按照父列的百分比进行计算的1.4自定义栅格于variables.css中改变变量，默认列12，宽60px，间隔20px，要保证响应性还得修改responsive.less中内容1.5布局container为940px居中，container-fluid则为流体布局1.6 响应式设计responsive.less中提供了一组media query：智能手机《=480px；流式列，非固定宽度垂直平板《=767px；流式列，非固定宽度水平平板》=768px；42px 20px默认》=980px；? ? ?60px ?20px大分辨率》=1200px；70px 30px要求添加meta标签，<meta name=”viewport” content=”width=device-width,initail-scale=1.0″>有诸如.visible-phone等支持类2.基础CSS2.1 排版整个排版单位基于variables.less中@baseFontSize与@baseLineHeight两个变量；强调：string加粗，em倾斜，abbr缩写【title属性存放显示信息，.initialism会减小缩略词字体】，address【使用br换行】引用：blockquote【cite属性存放来源URL，.pull-left或right决定内容居左右】，small用于引言作者【会在内容前加入破折号】列表：ul无序号有黑点，ul.unstyled无样式，ol有数字序号，dl描述，dl.dl-horizontal水平描述2.2代码code行级代码，pre块级【<>需要转义，.pre-scrollable可以设置350px最大高度】，应用.prettyprint和.linenums来美化代码【使用google prettify】table thead【tr】tbody【tr】tr【td或th】th【必须在thead之内】caption；.table行之间有水平线分割【2.0开始为默认】 .table-borderd 【边角为圆角】.table-striped 奇偶分开【使用:nth-child ie7-8不支持】 .table-condensed 紧凑竖直方向padding减半几个可以组合使用2.4表单四种表单：.form-vertical【2.0后默认，控件标签文字左对齐】.form-inline【左对齐，控件inline-block】 .form-search【文本框圆化】 .form-horizontal【左浮动，标签与控件居于同一行且文字右对齐】支持控件：文本输入框，单选，复选，下拉，多选，上传，文本域控件组：.control-group .control-label以及.controls【默认label应该与控件在同一行？】设计了各种控件状态【如focus，disabled，去除webkit的outline】，包含.error .warning .success验证样式扩张控件：.span*来指定输入框大小，使用.input-mini或small或medium或big来指定input 和select控件大小，2.0开始对.checkbox或.radio应用.inline即可实现行级，用label.checkbox包含input[type=checkbox]即可罗列，前置或后置文本保证.add-on与input 在同行, .help-inline与.help-block设置帮助文本2.5 按钮可以应用到a button及input标签上，.btn .btn-primary .btn-info等样式【ie9不兼容】，.btn-large small mini等尺寸，.disabled类或disabled属性可以禁用2.6 图标使用.icon-前缀设置，用<i>x显示图标，用.icon-white显示反白图标，图标定义在sprites.less 中3.1按钮3.1.1按钮组建议一个组里只用一种元素<a>或<button>，使用.btn-group，组合.btn-toolbar包装.btn-group即可合成工具条组件3.1.2按钮下拉菜单下拉菜单也得嵌套在.btn-group中，使用dropdown-toggle与ul.dropdown-menu类，支持Bootstrap下拉插件，箭头使用.caret，.dropdown-menu最近父标签应用.dropup即可变为上弹菜单【会改变.caret箭头方向】3.2导航3.2.1默认项基类.nav，对齐使用.pull-left或.pull-right【依赖float】，标签页ul.nav-tabs，胶囊链接ul.nav-pills3.2.2叠放式导航指竖直叠放ul.nav-stacked3.2.3下拉项综合使用下拉按钮【js下拉项插件】，参考3.1.23.2.4导航列表<i>使用标签，.pider空表项显示为水平间隔，.active选中项，.nav-header列表头3.2.5 标签页切换导航用.tabbale的p嵌套.nav-tabs，存放容器为.tab-content，内容页使用.tab-pane，标签置底用.tabs-below，标签居左.tabs-left，居右.tabs-right3.2.6 导航条固定导航条div.navbar与.navbar-fixed-top【必须预留40px或更多padding】，导航项ul.nav，li.pider-vertical分隔条，项目名称a.brand，表单.navbar-form，对form.navbar-search中输入框使用.search-query得到搜索框，下拉菜单参考3.2.3，导航条文本使用<p>，响应式嵌套在.nav-collapse.collapse并对按钮都应有.btn-navbar【需要js切换插件】3.2.7面包屑导航ul.breadcrumb3.2.8页码div.pagination>ul，同样使用.active与.disabled，页码对齐使用.pagination-centered或.pagination-right，前后页ul.pager【居于左右端li.previous与li.next】3.3行内标签bel默认样式，bel-success成功等3.4 标号span.badge默认样式，span.badge.badge-success等3.5 排版主角单元div.hero-unit中嵌套，标题h1，可以嵌入small，3.6 缩略项ul.thumbnails>li.span*>a.thumbnail>img链接图像，div.thumbnail块状内容3.7通知基类div.alert【2.0开始替代.alert-message】，例子：div.alert>a.close+strong，加强.alert-block 提供更大的padding而.alert-heading修饰标题，语义强化.alert-error或success或info3.8进度条基本div.progress>div.bar[style="width:60%"]，条纹效果div.progress.progress-striped【动画效果加上.active，使用css3渐变动画，不支持ie】，语义加强.progress-info或success 等3.9杂项消息墙div.well，关闭图标a.close4 jQuery插件4.1对话框【bootstrap-modal.js】$().modal({backdrop:true背景,keyboard:true支持ESC,show:true初始化显示}) ，触发设置data-toggle=”modal”然后data-target=”#foo”或href=“#foo”，对话框设置div.modal#foo即可：div.modal-header>a.close[data-dismiss="modal"]+div.modal-body+div.modal-footer【显示动画效果bootstrap-transition.js，对.modal应用.fade即可】，方法.modal(“toggle”)或.modal(“show”)或.modal(“hide”)，事件show,shown,hide,hidden4.2 下拉项【bootstrap-dropdown.js】样式应用导航栏与胶囊链接，方法$().dropdown()，设置data-toggle=”dropdown”【也可以使用data-target=”#foo”或href=“#foo”来关联下拉项与链接】4.3 滚动侦测【bootstrap-scrollspy.js】$(…#navbar‟).scrollspy()标记添加data-spy=”scroll”【导航链接必须有href=”#id”且对应有dom#id】，选项offset【默认为10】4.4 可切换的标签页【bootstrap-tab.js】方法$(…#myTab‟).tab(…show‟) 标签页需要设置data-target=‟#id‟或href=‟#id‟标记添加data-toggle=”tab”或data-toggle=”pill”，事件show与shown 【event.target指向激活标签，event.relatedT arget指向之前激活的标签】4.5 工具提示【bootstrap-tooltips.js】$(…#example‟).tooltip(options) 中选项animation:true，placement:‟top‟，selector，title，trigger:‟hover‟，delay:{show:num, hide:100}工具提示可以单独设置data-属性实现与js调用同样的功能，指定一个selector即可【设置rel=”tooltip”】方法：.tooltip(…show‟)?.tooltip(…hide‟)?.tooltip(…toggle‟)4.6 弹出提示【bootstrap-popover.js】$(…#example‟).popover(options)中选项animation:true，placement:‟top‟，selector，trigger:‟hover‟，title，content，delay同样可以单独设置data-属性，方法也相同4.7 通知消息【bootstrap-alert.js】$(“.alert”).alert()用在通知，对关闭按钮设置data-dismiss=”alert”即可定时关闭方法$(“.alert”).alert(…close‟)，事件close closed4.8 按钮【bootstrap-button.js】应用在btn与btn-group，设置data-toggle=”button”与data-toggle=”button-checkbox”与data-toggle=”button-radio”样式方法$().button(…toggle‟) 按下$().button(…loading‟) 载入文本data-loading-text属性中$().button(…reset‟)重置按钮状态4.9 折叠手风琴【bootstrap-collapse.js】$().collapse({toggle:false})，事件show，shown，hide，hidden设置data-toggle=“collapse”和data-target即可变为折叠式，data-target接收一个css选择器以选取元素添加，元素上需要添加.collapse，默认打开用.in4.10 轮播【bootstrap-carousel.js】$().carousel({interval:5000, pause:‟hover‟})标记用data-属性提供前后翻页，data-slide=”prev或next”方法.carousel(…cycle或pause 或number或prev或next‟) 事件slide，slid4.11 输入提醒【bootstrap-typeahead.js】$().typeahead({source:[]数据源, items:8列表显示个数, matcher:fn, sorter:fn, highlighter:fn})，设置data-provide=”typeahead”5. LESSmixins.less中保存所有混合，编译安装npm intall -g less uglify-js lessc ./lib/bootstrap.less > bootstrap.css压缩使用–compress，引用less.js 也可以重新编译.less文件并进行本地存储本文链接：»/resource/3236.html。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

本作品由VentLam创作，采用知识共享署名-非商业性使用-相同方式共享2.5 中国大陆许可协议进行许可。

BootStrap入门教程(一)2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。

Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。

大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap建设的网站：界面清新、简洁;要素排版利落大方。

如下图所示：https:///http://www.fleetio.co m/GitHub上这样介绍bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。

基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等。

本系列教程遵循官方文档结构来介绍bootstrap，包括手脚架（Scaffolding),基础CSS,组件,javascript插件，使用LESS与自定义.本文主要介绍Boo tstrap的基础布局--Scaffolding.Bootstrap建立了一个响应式的12列格网布局系统，它引入了fixed和fluid-with两种布局方式。

我们从全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts),响应式设计(Responsive Design)这六五个方面深入讲解Boostrap的scaffolding.全局样式(Global Style).Bootstrap要求html5的文件类型，所以必须在每个使用bootstrap页面的开头都引用:<!DOCTYPE html><html lang="en"> ...</html>2同时，它通过Bootstrap.less文件来设置全局的排版和连接显示风格.其中去掉了Body的margin，使用@baseFontFamily,@baseFontSize,@linkColor等变量来控制基本排版。

3格网系统(Grid System).默认的Bootstrap格网系统提供一个宽达940像素的,12列的格网。

这意味着你页面默认宽度是940px,最小的单元要素宽度是940/12px.Bootstrap能够使得你的网页可以更好地适应多种终端设备(平板电脑，智能手机等)。

默认格网系统直观概念如图1-1所示：图1-1 默认格网系统(Default G rid System)以下简单的代码则是实现图1-1中，第三列的宽度为4和宽度为8的两个div.<div class="row"><div class="span4">...</div><div class="span8">...</div></div>2.2偏移列. 有时候，页面要素前面需要一些空白，bootstrap提供了偏移列来实现，如图1-2所示：图1-２偏移列(Offset co lumns)以下代码实现了是实现图1-2中，第一列的宽度为4和偏移度为4宽度为4的两个div.<div class="row"><div class="span4">...</div><div class="span4 offset4">...</div></div>2.3 嵌套列. 嵌套列是容许用户实现更复杂的页面要素布局。

在bootstrap中实现嵌套列非常简单，只需要在原有的div中加入.row 和相应的长度的span* div即可。

如图1-3所示：图1-3 嵌套列(Nesting columns)以下代码实现了是实现图1-3中，第一层的宽度为12和第二层两个宽度为6的两个div.<div class="row"><div class="span12"> Level 1 of column<div class="row"><div class="span6">Level 2</div><div class="span6">Level 2</div></div></div></div>嵌套的div长度之和不能大于它的父div，否则会溢出叠加。

各位可以试试将第一层的div长度改为其他值，看看效果。

流式格网系统(Fluid grid system).它使用%，而不是固定的px,来确定页面要素的宽度.只需要简单的将. row 改成.row-fluid ，就可以将fixed行改为fluid.如图1-4所示：图1-4 流式格网系统(Fluid grid system)以下代码实现了是实现图1-4中，两个不同长度的流式页面要素.<div class="row-fluid"><div class="span4">...</div><div class="span8">...</div></div>嵌套的流式格网和嵌套的固定格网，稍微有些不同。

嵌套流式格网(Fluid nesting)的子要素不用匹配父要素的宽度，子要素用100%来表示占满父要素的页面宽度。

自定义格网(Grid customization).Bootstrap允许通过修改variables.less的参数值来自默认值说明定义格网系统。

主要包括如表1-1所示的变量：变量@gridColumns 12 列数@gridColumnWidth 60px 每列的宽度@gridGutterWidth 20px 列间距表1-1 格网变量我们通过修改以上值，并重新编译B ootstrap来实现自定义格网系统。

如果添加新的列，需要同时修改grid.less.同样的,需要修改responsive.less来获得多设备兼容.布局(Layout).本文最后我们讨论创建页面基础模板的布局。

如前面所言，Bootstrap提供两种布局方式，包括固定(Fixed)和流式(Fliud)布局。

如图1-5所示，左边为Fixed布局，右边为Fluid布局：图1-5 布局(Layout)固定布局代码如下：<body><div class="container"> ...</div></body>流式布局代码如下：<div class="container-fluid"><div class="row-fluid"><div class="span2"></div><div class="span10"></div></div></div>如果对Bootstrap提供的布局不够满意，可以参见L ess Frame Work 提供的模板。

最后，再次强调，官方文档极其优秀，强烈推荐各位直接参考和学习之。

/bootstrap/inde x.html参考文献与延伸阅读：1.Bootstrap的来由和发展。

/articles/building-twitter-bootstrap/2.Less与Sass的介绍与对比./2011/09/09/an-introduction-to-less-and-compariso n-to-sass/3.Html5模板/4.Html5与Bootstrap混合项目(H5BP)https:///14228795.20个有用的Bootstrap资源/20-beautiful-resources-that-complement-twitter-bo otstrap/6.Bootstrap按钮生成器/bootstrap_buttons/7.前后端结合讨论/questions/9525170/backend-technology-for-front-end-technologies-lik e-twitter-bootstrap8. Bootstrap英文教程/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-t witter/BootStrap入门教程(二)上讲回顾：Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局，它同时建立了一个宽达940px和12列的格网系统。

基于手脚架(Scaffolding)之上，Bootstrap的基础CSS(Base CSS)提供了一系列的基础Html页面要素，旨在为用户提供新鲜、一致的页面外观和感觉。

本文将主要深入讲解排版(Typography),表格(Table),表单(Forms),按钮(Buttons)这四个方面的内容。

排版(Typography)，它囊括标题(Headings),段落(paragraphs), 列表(lists)以及其他内联要素。

我们可以通过修改variables.less的两个变量:@baseFontSize 和@baseLineHeight来控制整体排版的样式。

Bootstrap 同时还用了一些其他的算术方法来创建所有类型要素的margin,padding,line-height等。

1.1 标题和段落使用常见的html<h*></h*>和<p></P>即可表现,可以不必考虑margin,padding。

Bootstrap教程第一课：简单的Bootstrap主页

页数:5
Bootstrap实战教程

页数:20
黑马程序员UI教程：Bootstrap弹出框

页数:4
Bootstrap入门与布局教程

页数:36
适合初学者的教程——Bootstrap表格

页数:8
《BootStrap开发技术》课程标准.doc

页数:20
响应式网页开发基础教程(jQuery+Bootstrap)第1章响应式网页设计基础

页数:19
bootstrap响应式网站开发实例教程课件第3章第1节

页数:21
BootStrap入门教程

页数:45
适合初学者的教程——Bootstrap导航栏

页数:5