20分钟建立自己的Bootstrap站点
这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点。看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面，了解栅格系统，并且能够使用bootstrap导航、导航条和了解响应式设计的基础。这些全部都是使用twitter bootstrap所需要具备的知识。
首先需要说的是twitter bootstrap是非常优秀的一个前端开源框架，它为所有的组键都提供了详细的用例，让你能够轻易地通过复制黏贴而附加到你的设计中。查阅官方文档：/bootstrap/index.html
基本的HTML模板
我们需要以一个基本的HTML模板，这样我们能够把所需要的bootstrap文件包含进来。下面就是我们twitter bootstrap项目的开头，复制这些代码到一个文件中并将其命名为index.html。
&!DOCTYPE html&
&&&& &title&Twitter Bootstrap Tutorial - A responsive layout tutorial&/title&
&&&& &style type='text/css'&
&&&&&& && body {
&&&&&&&&&& && background-color: #CCC;
&&&&&&&& }
&&&& &/style&
&/html&&&&
这段代码中我们已经添加了一些CSS使页面的背景呈亮灰色，因为这样我们能够轻易地在我们的设计中看见不同的列，使它更加容易理解。
引入twitter bootstrap文件
为了使用twitter bootstrap我们仅仅需要把一个文件引入到我们的模板当中来，引入文件有很多种方法，如果你想了解这些方法请查阅相关文档。
基于本教程的出发点，我们将会通过CDN来引入bootstrap-combined.min.css文件而不需要下载任何的文件。
&link href="/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"&
它能够使所有的twitter bootstrap CSS在我们的模板中生效。
Twitter Bootstrap的容器
bootstrap的container类是非常有用的，它能在页面中创建一个居中的区域，然后我们能够把其他位置的内容放到里面。container类等价于创建了一个具有静态宽度并且magin值为auto的一个居中的div框。twitter bootstrap的 container类的优点在于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以实用。
在body标签中，使用container类创建一个div。它会作为页面主要的放置其他代码的外层包裹。
如果你调整这个DIV的高度并将其背景颜色设置为白色，你所看到的效果会是这样：
标题和导航
现在我们已经有一个地方可以添加额外的HTML代码，我们可以添加标题文本然后再创建站点的主要导航条。
加入如下的文本或者你选择的文字到container类的div标签当中。
&h1&TWITTER BOOTSTRAP TUTORIAL&/h1&
现在并没有多少新的东西，这仅仅是一个标题，让我们转移到更有趣的方面，twitter bootstrap导航。
Bootstrap 有一个nav类让我们能够创建各种各样的导航元素，你可以在h1标签之后加入如下的代码。
&div class='navbar navbar-inverse'&
&&&& &div class='nav-collapse' style="height:"&
&&&& &&&& &ul class="nav"&
&&&& &&&& &&&& &li class="active"&&a href="#"&Home&/a&&/li&
&&&& &&&& &&&& &li&&a href="#"&Page One&/a&&/li&
&&&& &&&& &&&& &li&&a href="#"&Page Two&/a&&/li&
&&&& &&&& &/ul&
&&&& &/div&
navbar相关的类拥有导航条所有的样式，添加navbar-inverse类将会应用一个很酷的黑色风格，这是一个twitter bootstrap的常见搭配。我建议在这个样式的基础上进行拓展从而创造你的独一无二的导航。但在这个教程中我们仍然会使用基础的bootstrap样式。
在类为navbar的DIV当中，我们添加另一个类为nav-collapse的DIV并为其添加行内样式height:auto；这是告诉bootstrap当这个页面在小于970px宽度的浏览器窗口当中时，它会提供一个压缩的切换视图。
如果你保存了index.html文件然后在浏览器中打开，当你调整浏览器窗口的宽度时你就能够看到这个变化，如图所示。
大于979px：
小于979px：
另外，我们可以添加nav类到一个HTML无序列表元素中以便从bootstrap CSS文件中应用更多的样式，也可以添加一个active类到&HOME&列表项中。
注：相关网站建设技巧阅读请移步到频道。
看过本文的人还看过
最新图文推荐
最新专栏文章
大家感兴趣的内容
&&<a rel="nofollow" class="red" href="" target="_blank" color="red新版网站排行榜
===全新上线===
网友热评的文章&&&&让你快速搭建一个bootstrap页面
让你快速搭建一个bootstrap页面
个人整理的一个万能的bootstrap模板，让你快速搭建一个bootstrap页面，兼容Ie8,ie8以下要在服务器上才能看的出来效果哦，你可以自己在本地搭建一个服务器如iis
若举报审核通过，可奖励20下载分
被举报人：
qianqianyixiao1
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
免积分&&极速下载60元/年（1200次）
您可能还需要
移动开发下载排行Bootstrap & Jetstrap-快速构建你的网站 - woiweb - ITeye技术网站
来自于Twitter，是一个基于，，的时尚的、直观的、强大的流行前端框架及交互组件集，可用于快速，简单构建你的网站。
Bootstrap拥有以下特性：
由匠人建，为匠人用
和您一样，我们乐于创造出色的web应用，于是想帮助更多象我们一样的匠人更为高效快捷地构建产品。Bootstrap因此而生。
适应各种技术水平
Bootstrap适应不同技术水平的从业者，无论是设计师还是程序员，大牛还是菜鸟。既能用来开发简单的小东西，也能构造更为复杂的应用。
跨设备，跨浏览器
最初设想中的Bootstrap只支持现代浏览器，不过新版本已经能支持所有主流浏览器（甚至包括IE7）。从Bootstrap 2开始，提供对平板和智能手机的支持。
12列栅格布局
栅格系统不是万能的，不过在应用的核心层有一个稳定和灵活的栅格系统确实可以让开发变得更简单。可以选用内置的栅格或是自己手写。
响应式设计
从Bootstrap 2开始，提供完整的响应式特性。所有的组件都能根据分辨率和设备灵活缩放，从而提供一致性的用户体验。
样式化的文档
与其他前端工具箱不同，Bootstrap优先设计了一个样式化的使用指南，不仅用来介绍特性，更用以展示最佳实践，应用以及代码实例。
不断完善的库
尽管只有10kb(gzip压缩后)，Bootstrap却仍是最完备的前端工具箱之一，提供了几十个全功能的随时可用的组件。
定制的插件
一个出色的组件设计岂能没有易用易扩展的人机界面？Bootstrap为此提供了定制的jQuery内置。
用LESS构建
当传统的枯燥CSS写法止步不前时，LESS横空出世了。LESS中使用变量，嵌套，操作，混合编码，花费很小成本却让书写CSS更快更灵活。
支持标签和语法
逐步改进组件达到最终效果
全部托管于 .
Twitter制造
由经验丰富的和奉献
Bootstrap的使用：
&!-- AdSense Now! V1.92 --&&!-- Post[count: 2] --&
&script type="text/javascript"&&!--
google_ad_client = "ca-pub-7241";
/* 300x250, adsence 10-7-7 */
google_ad_slot = "";
google_ad_width = 336;
google_ad_height = 280;
&/script&&script type="text/javascript" src="/pagead/show_ads.js"&
使用Bootstrap开发网站非常简单，你只需用它提供的组件及样式即可开发出美观、大方、交互性很强的网站，如：， 等，开发教程非常简单，去Bootstrap官网下载开发包，解压至你的项目，引入其核心js和css文件，然后按其教程去做就可以了，这里不再多讲。
Jetstrap可视化工具：
如果你觉得按Bootstrap教程做并且写代码比较麻烦，那么好吧，推荐一个可视化的在线构建 Bootstrap 的工具：。jetstrap提供了一个可视化工具，它提供了一个设计面板，一个工具箱（内置多组组件），使用方法很简单：
你只需将工具箱里面的组件拖到设计面板中，点击组件会出现一个组件设置框，里面可以设置组件的id和class、文本等。双击组件，可以调整内容及样式等。如果设计完成，可以点击右上角的预览工具预览，再次点击可回到编辑状态进行修改。而且可以在多种平台下预览效果。如下图：
如果确认无误后，还可以导出为html文件，实为便捷，如果还是不太清楚操作，请看下面视频。
如果你感兴趣，赶快去试试吧。
参考资料及网站：
Bootstrap官方网站：
Bootstrap中文站点：
Jetstrap网站：
新浪微博jssdk官方网站：
汽车标志大全地址：
论坛回复 /
(3 / 10663)
dengjianqiang200
浏览: 71937 次
来自: 北京
那如果是高亮呢？有考虑过吗？
我也是这么干的时间：&s:property va ...
搞得那么复杂，工具用不好只会成为阻碍& 快速搭建Web环境 Angularjs + Express3 + Bootstrap3
快速搭建Web环境 Angularjs + Express3 + Bootstrap3
，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。
张丹(Conan), 程序员Java,R,PHP,Javascript
weibo：@Conan_Z
转载请注明出处：
Angularjs越用越顺手，不仅代码量比jQuery少很多，而且实现思路特别清晰，构建大型的Web前端项目，真是最适合不过了。
Bootstrap让界面美观大方，就连像我这种不懂UE的人，也能做出专业级的水准。再结合Nodejs的Express做后端，三剑合并，太无敌了，大有统一前端开发的趋势，前途不可估量！
从零开始手工创建Express3项目
新建Angularjs目录及文件
配置Angularjs项目
增加Bootstrap
完整的项目
1. 从零开始手工创建Express3项目
系统环境：
Win7 64bit 旗舰版
node v0.10.5
npm 1.2.19
bower 1.1.2
本文截图中使用的开发工具是WebStorm，请参考文章：
创建express项目
~ D:\workspace\javascript&express -e angular-basic
~ D:\workspace\javascript&cd angular-basic && npm install
生成的express项目目录
修改app.js的配置
修改ejs: 文件扩展名ejs为html
设置angular: 启动路径为&#8221;/&#8221;
设置angular: 启动文件为app/index.html
~ vi app.js
var express = require('express')
, path = require('path')
, ejs = require('ejs')
, app = express()
, server = require('http').createServer(app);
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.engine('.html', ejs.__express);
app.set('view engine', 'html'); //替换文件扩展名ejs为html
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'app')));
if (app.get('env') === 'development') {
app.use(express.errorHandler());
// angular启动页
app.get('/', function (req, res) {
res.sendfile('app/index.html');
server.listen(app.get('port'), function () {
console.log('Express server listening on port ' + app.get('port'));
如何单独创建Express3的项目，请参考文章：
2. 新建Angularjs目录及文件
创建Angularjs需要的目录及文件
D:\workspace\javascript\angular-basic&mkdir app
D:\workspace\javascript\angular-basic&mkdir app\scripts
D:\workspace\javascript\angular-basic&mkdir app\scripts\angular
D:\workspace\javascript\angular-basic&mkdir app\styles
D:\workspace\javascript\angular-basic&mkdir app\views
D:\workspace\javascript\angular-basic&mkdir app\views\component
D:\workspace\javascript\angular-basic&mkdir app\views\tpl
D:\workspace\javascript\angular-basic&touch app\index.html
D:\workspace\javascript\angular-basic&touch app\scripts\angular\app.js
D:\workspace\javascript\angular-basic&touch app\scripts\angular\controllers.js
D:\workspace\javascript\angular-basic&touch app\styles\main.css
D:\workspace\javascript\angular-basic&touch app\views\tpl\welcome.html
D:\workspace\javascript\angular-basic&echo "aaaa" & app\index.html
创建的Angularjs目录及文件
目录解释：
app目录: Angular项目的根目录
scripts目录: 存放Javascript脚本目录
scripts\angular目录: 存放Angular Javascript脚本目录
styles目录: 存放css的目录
views目录: 存放html的目录
views\component目录: 存放html的自定义组件目录
views\tpl目录: 存放html的目录
文件解释：
app\index.html: Angular项目的入口文件
styles\main.css: Angular项目的css文件
scripts\angular\app.js: Angular项目全局配置文件
scripts\angular\controllers.js: Angular项目全局控制器文件/li&
views\tpl\welcome.html: 欢迎页
删除不需要的文件目录
D:\workspace\javascript\angular-basic>rm -rf public
D:\workspace\javascript\angular-basic>rm -rf routes
启动node服务器，检查入口页的配置
D:\workspace\javascript\angular-basic&node app.js
Express server listening on port 3000
GET / 200 11ms - 9b
界面显示&#8221;aaaa&#8221;，说明node启动express，已经指向到app\index.html的页面。
3. 配置bower
接下来，我要通过bower来安装Angularjs和Bootstrap，以及其他依赖的前端库。关于bower的详细使用，请参考文章：
.bowerrc: bower的环境设置，用于指定bower的依赖库的存放位置
bower.json: bower的依赖管理
新建文件: .bowerrc
~ vi .bowerrc
"directory": "app/bower_components"
新建文件: bower.json
~ vi bower.json
"name": "angular-basic",
"version": "0.0.1",
"dependencies": {
"angular": "~1.2.12-build.2226",
"angular-route": "~1.2.12-build.2226"
"devDependencies": {
运行bower，下载Angular依赖库
D:\workspace\javascript\angular-basic&bower install
bower angular-route#~1.2.12-build.2226
cached git:///angular/bower-angular-route.git#1.2.13-build.2242
bower angular-route#~1.2.12-build.2226
validate 1.2.13-build.2242 against git:///angular/bower-angular-route.git#~1.2.12-build.2226
bower angular#~1.2.12-build.2226
cached git:///angular/bower-angular.git#1.2.13-build.2242
bower angular#~1.2.12-build.2226
validate 1.2.13-build.2242 against git:///angular/bower-angular.git#~1.2.12-build.2226
bower angular#1.2.13-build.2242+sha.e645f7c
cached git:///angular/bower-angular.git#1.2.13-build.2242
bower angular#1.2.13-build.2242+sha.e645f7c
validate 1.2.13-build.2242 against git:///angular/bower-angular.git#1.2.13-build.2242+sha.e645f7c
bower angular-route#~1.2.12-build.2226
install angular-route#1.2.13-build.2242
bower angular#~1.2.12-build.2226
install angular#1.2.13-build.2242
angular-route#1.2.13-build.2242 app\bower_components\angular-route
└── angular#1.2.13-build.2242
angular#1.2.13-build.2242 app\bower_components\angular
下载最新版本的angular和angular-route，类库存放在app/bower_components目录下面。
4. 配置Angularjs项目
修改index.html: 在入口文件，页面模板
修改welcome.html: 欢迎页
修改app.js: 全局配置
修改controller.js: 控制器
修改index.html
&!DOCTYPE html&
&html lang="zh-cn"&
&meta charset="utf-8"&
&title&Angular-basic&/title&
&meta name="description" content="Copyright http://blog.fens.me"&
&link rel="stylesheet" href="styles/main.css"&
&body ng-app="app"&
&li&&a href="http://blog.fens.me/angularjs-express3-bootstrap3/"&快速搭建Web环境 Angularjs + Express3 + Bootstrap3&/a&&/li&
&li&http://blog.fens.me/angularjs-express3-bootstrap3&/li&
&div ng-view&&/div&
&script src="bower_components/angular/angular.min.js"&&/script&
&script src="bower_components/angular-route/angular-route.min.js"&&/script&
&script src="scripts/angular/app.js"&&/script&
&script src="scripts/angular/controllers.js"&&/script&
修改welcome.html
Welcome {{ username }}
修改app.js
'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {templateUrl: '/views/tpl/welcome.html', controller: 'WelcomeCtrl'})
.otherwise({redirectTo: '/'});
$locationProvider.html5Mode(true);
修改controller.js
'use strict';
function WelcomeCtrl($scope){
$scope.username = 'Conan_Z';
重新启动node，查看Angular项目。
D:\workspace\javascript\angular-basic&node app.js
Express server listening on port 3000
GET / 304 8ms
GET /styles/main.css 304 3ms
GET /scripts/angular/app.js 304 6ms
GET /scripts/angular/controllers.js 304 11ms
GET /bower_components/angular-route/angular-route.min.js 200 18ms - 3.82kb
GET /bower_components/angular/angular.min.js 200 19ms - 98.03kb
GET /views/tpl/welcome.html 304 9ms
GET /bower_components/angular-route/angular-route.min.js.map 200 21ms - 9.61kb
GET /bower_components/angular/angular.min.js.map 200 26ms - 264.16kb
界面显示：
index.html中配置的链接已经显示，同时welcome.html页面中配置的Welcome Conan_Z，也显示出来了。关于路由和模板配置，请参考文章：
5. 增加Bootstrap
接下来，增加Bootstrap-v3，让界面好看起来。我们还是有bower来管理Bootstrap的依赖。
通过命令行，增加类库，并写入的bower.json文件
D:\workspace\javascript\angular-basic&bower install bootstrap --save
D:\workspace\javascript\angular-basic&bower install angular-bootstrap --save
修改index.html: 增加css, js的引用
修改welcome.html: 增加bootstrap的效果
修改index.html
&!DOCTYPE html&
&html lang="zh-cn"&
&meta charset="utf-8"&
&title&Angular-basic&/title&
&meta name="description" content="Copyright http://blog.fens.me"&
&link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"&
&link rel="stylesheet" href="styles/main.css"&
&body ng-app="app"&
&div class="container"&
&h2 class="text-primary"&
&a href="http://blog.fens.me/angularjs-express3-bootstarp3/"&快速搭建Web环境 Angularjs + Express3 + Bootstarp3&/a&
&p&http://blog.fens.me/angularjs-express3-bootstarp3&/p&
&div class="row"&
&div class=".col-lg-12"&
&div ng-view&&/div&
&script src="bower_components/angular/angular.min.js"&&/script&
&script src="bower_components/bootstrap/dist/js/bootstrap.min.js"&&/script&
&script src="bower_components/angular-route/angular-route.min.js"&&/script&
&script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"&&/script&
&script src="scripts/angular/app.js"&&/script&
&script src="scripts/angular/controllers.js"&&/script&
修改welcome.html
&form class="form-inline" role="form"&
&div class="form-group"&
&label&Welcome&/label&
&input type="text" class="form-control" ng-model="username" placeholder="Enter email"&
&p& {{ username }}&/p&
这样就用手动的方式的搭建了：Angularjs + Express3 + Bootstrap3的组合。
6. 完整的项目
项目代码已上传的github，项目地址：
项目下载及安装
git clone /bsspirit/angular-basic
npm install
bower install
node app.js
当然，对于大型的Angular项目，我们可以选择用Yeoman的种子构建，请参考文章：
但有时Yeoman的项目，更新不够及时，比如bootstrap已到v3了，种子项目还是bootstrap的v2，而且v3不兼容v2。这时也许手动构建自己的项目，才是更好的选择。
转载请注明出处：
This entry was posted in ,
Pingback: ()
Designed by建站教程：利用Bootstrap进行快速Web开发-站长新闻-源码库|专注为中国站长提供免费商业网站源码下载！
当前位置:---建站教程：利用Bootstrap进行快速Web开发
建站教程：利用Bootstrap进行快速Web开发
了解如何使用 Bootstrap 快速开发网站和 Web 应用程序（包括移动友好型应用程序）。Bootstrap 以 LESS 项目为基础，由 Twitter 的内部工程师开发，它为 Web 应用程序 UI 提供了一致的框架。
浏览器开发人员最后将其支持全都聚集在标准上，比如 HTML5、级联样式表&2 级 (CSS2) 和 CSS3。这些标准减少了浏览器行为自 Web 全面启动开始以来困扰开发人员和设计人员的许多不合理变化。为了掩盖遗留问题并适应遗留浏览器，一些开发人员创作出了 Web 页面框架。这类工具使得即使是普通人也可以开发适合大多数用户的网站。
其中一个最受欢迎的 Web 页面框架来自一个预料之外的来源。Twitter 的开发人员厌倦了设法解决用于网页开发的许多不同组件。他们创建了单一的框架来提供 Web 页面设计中的最常见元素，同时支持合理的灵活性。他们以 Bootstrap（一种开源项目）的形式与全世界共享这一工具包。
Bootstrap 以 LESS 项目为基础，增强了 CSS 语言。Bootstrap 还包括基本的 CSS 元素，这些元素用于排印、表单、按钮、表格、网格、导航、警告等。Bootstrap 的主要目标是帮助 Web 开发人员加快其项目。这也是目前 GitHub&软件库中最受欢迎的项目。个人、小型团队，甚至大型组织都在使用 Bootstrap。
本文将向您介绍如何使用 Bootstrap 快速开发网站和应用程序，包括移动友好型应用程序。本文反映了开发人员的观点，而不是设计人员的观点。要想从本文和 Bootstrap 中获益，您需要掌握 HTML 和 CSS 的应用知识。
下载已编译的 Bootstrap 数据包。我在本文中使用的是 V2.3.2。下载内容包括 Bootstrap 的关键元素 CSS，以及一些有用的图像和 JavaScript 文件。您可以根据我在文中的描述为 Web 页面提供 HTML。Bootstrap 文档中不包含框架支持的许多设计选项的样例 HTML。但是 Bootstrap 文档页面（尽管其本身已说明了 Bootstrap 的灵活性）还不足以解释真正起作用的基本设计原则。
响应式 Web 设计
查看 Web 页面的设备包括小型移动电话，以及大于普通台式计算机外形规格的显示器。在响应式设计&中，一开始就在 Web 页面中构建了灵活性，这样用户就可以通过所有设备查看页面。响应式设计的核心是 CSS3&媒体查询，这是根据设备性质（尤其是用户的显示器大小）来调用 CSS 规则的一种标准方法。
对于典型开发人员启动的各种项目，我建议首先使用启用了响应特性的固定布局。固定布局更易于组织，而且响应特性支持从一开始就培养考虑网站如何在移动设备上运行的良好习惯。如果项目要应用于生产环境中，而且您正在与设计人员合作，那么设计人员应能够使您的文件适用于更加适合的其他任何模型。
针对 Bootstrap 的 HTML
清单 1 是一个有用的框架 HTML 文件，用于结合使用 Bootstrap 与一个固定布局和响应特性：
清单 1. 用于 Bootstrap 项目的基本框架 HTML 文件
在 Bootstrap 下载中，请注意，每个 CSS 和 JavaScript 文件有两个版本可用（例如 bootstrap.js 和 bootstrap.min.js）。第一种形式是一个常规文件，第二种形式是压缩文件或 &缩小文件&。就像在本文中一样，使用缩小版本即可实现最有效的页面加载。
listing1.html 的开始之处的&DOCTYPE&声明将其标记为一个 HTML5 文件。head&元素内的&meta标记控制移动的小屏幕布局。（为方便起见，我将它们称作&meta/viewport&标记。）默认情况下，大多数移动设备按比例缩小 Web 页面，使之适应屏幕大小，就像在桌面浏览器窗口中一样。这就是为什么许多网站上的文本和图像在手机浏览器中看起来很小的原因。meta/viewport&声明中的&initial-scale=1.0&部分禁用了这一行为，告诉设备要保持页面的原有尺寸。该声明表示 Web 设计人员（在本例中为 Bootstrap）已经完成了实现较小屏幕的响应式设计这一任务，所以在默认情况下，没必要采用蛮力方法。
稍后，清单 1&的&head&标记是 Bootstrap CSS 的链接。在文件的末尾，加载 jQuery 和 Bootstrap 实用程序 JavaScript。这些脚本在末尾运行可实现最佳性能。
当使用 Bootstrap（或任何 Web 支持文件集）时，您可以从多种方法中选择用来设置 HTML 和其他代码的方法。我建议您创建一个文件夹来存储自己的项目，然后将 Bootstrap 文件及其完整的文件夹结构复制到项目文件夹中。将您自己的 HTML 文件放在最顶层，并将您自己的 CSS、JavaScript 和图像文件放在相应的 Bootstrap 子文件夹中（这些文件夹的名称分别为 css、js 和 img）。然后，整体结构如下所示：
CSS 设备调整
meta/viewport&标记是当前的约定，用于将页面调整为设备的可视浏览器空间。万维网联盟 (World Wide Web Consortium, W3C) 正在准备一种替换机制，该机制以一种新的 CSS 规则的形式出现。清单 1&中&meta/viewport&声明的等效 CSS 是：
目前，您可以将这个代码包含在您的 CSS 中，并在 HTML 中保留&meta/viewport&标记。当 CSS 形式受到广泛支持时，您就可以删除meta/viewport&声明。
清单 1&中的主要容器&div&表示使用 Bootstrap 的固定布局。放入该容器中的 HTML 合并到了 Bootstrap 的网格系统&中。
如果还能想起曾经看到过的大部分 Web 页面，那么您就会认识到它们被分成了一系列的块。位于页面顶部的块可能拥有一个徽标。导航可能位于左边或右边的块中，而内容索引可能也适合放在那个位置。甚至可能出现另一个块包含一个脚注的情况。主要内容本身可能被划分成多个面板或块。过去，Web 设计人员通过使用 CSS 盒子模型（box model）手工设置所有这些块。
网格系统是将盒子布置（比如刚刚描述的）抽象为行和列的一种方法。Bootstrap 为此类网格提供了一个核心的 CSS。您可以通过使用特殊的类，通过嵌入&div&元素将内容放置在任何布局的盒子中。
图 1 显示了一个有用的模板，这个模板最初由 Aaron K. White 开发，用于可视化 Bootstrap 的网格系统并规划如何安排您的内容。在本文中，我做了一些修改，以便在本文中更容易读取文本。
图 1. Aaron K. White 的 Bootstrap 网格系统模板
Bootstrap 网格系统的每一行最多有 12 块，每两个块之间留有小槽来提供间隔。您可以拥有无限数量的行，每一行的高度任您设置。每个块是 70 像素宽，小槽是 30 像素宽。Bootstrap 还为页面正文设置一个 30 像素的左边距。网格系统的设计目标是进行基本的布置并为您分配空间，因此，在理想情况下，您只需关注要在网格中放入什么即可。
填充 HTML 模板
在 &在 CSS 中使用 LESS 实现更多的功能& 中，我使用了一个响应式设计示例来展示 LESS 工具如何增强 CSS 语法。Bootstrap 是一种功能强大的工具，可简化来自该代码的许多关注。清单 2 是来自这篇文章的 HTML，重写该 HTML（如 listing2.html），以便在 Bootstrap 的固定布局网格系统中运行它，并使用 Bootstrap 的响应特性进行补充：
相关站长新闻：
站长新闻搜索
站长新闻推荐
热门源码推荐
热门站长新闻
&#169;2012}