Bootstrap 教程
Bootstrap 布局
在本教程中，您将学习如何使用 Bootstrap 工具包来创建固定布局和流动布局。教程是基于 Bootstrap 版本 2.0。
在版本 2.0 中，Bootstrap 为手机、平板电脑、笔记本、小型台式机、大型宽屏台式机等添加了响应特性。
可以通过向页面添加 bootstrap-responsive.css 文件（位于 docs\assets\css 下）来让布局具有响应性。
如果您想要创建基于固定像素数的网页或 app，请看这部分的教程。
&div class="container"&
bootstrap.css（位于 bootstrap 的主文件夹的 docs\assets\css 下）的第 261 到 273 行，为创建主容器渲染样式，从而创建一个固定布局。固定布局的目的是为网页或 app 创建一个 940 像素（默认）宽的布局。
下面的代码创建一个网页固定布局。为了定制，除了默认样式，还需创建一个新的 css 文件 example-fixed-layout.css，与 bootstrap.css 位于同一个文件夹下。
padding-top: 60
padding-bottom: 40
padding-top: 5
.leaderboard {
padding: 60
margin-bottom: 30
background-image: url('/twitter-bootstrap/images/gridbg.gif');
background-repeat:
-webkit-border-radius: 6
-moz-border-radius: 6
border-radius: 6
.leaderboard h1 {
font-size: 40
margin-bottom: 5
line-height: 1;
letter-spacing: -1
color:#FF6600;
.leaderboard p {
font-size: 18
font-weight: 200;
line-height: 27
&!DOCTYPE html&
&html lang="en"&
&&&&&meta charset="utf-8"&
&&&&&title&使用Bootstrap 版本 2.0 固定布局的实例&/title&
&&&&&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&&&&&meta name="description" content="Example of Fixed Layout with Bootstrap version 2.0 from w3cschool.cc"&
&&&&&meta name="author" content=""&
&&&&&!-- Le styles --&
&&&&&link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"&
&&&&&link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet"&
&&&&&!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --&
&&&&&!--[if lt IE 9]&
&&&&&&&&&script src="///svn/trunk/html5.js"&&/script&
&&&&&![endif]--&
&&&&&!-- Le fav and touch icons --&
&&&&&link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico"&
&&&&&link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png"&
&&&&&link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png"&
&&&&&link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png"&
&&&&&div class="navbar navbar-fixed-top"&
&&&&&&&&&div class="navbar-inner"&
&&&&&&&&&&&&&div class="container"&
&&&&&&&&&&&&&&&&&a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&
&&&&&&&&&&&&&&&&&&&&&span class="icon-bar"&&/span&
&&&&&&&&&&&&&&&&&&&&&span class="icon-bar"&&/span&
&&&&&&&&&&&&&&&&&&&&&span class="icon-bar"&&/span&
&&&&&&&&&&&&&&&&&/a&
&&&&&&&&&&&&&&&&&a class="brand" href="#"&
&&&&&&&&&&&&&&&&&&&&&img src="/images/w3r.png" width="111" height="30" alt="w3cschool logo" /&&/a&
&&&&&&&&&&&&&&&&&div class="nav-collapse"&
&&&&&&&&&&&&&&&&&&&&&ul class="nav"&
&&&&&&&&&&&&&&&&&&&&&&&&&li class="active"&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#"&Home&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#about"&About&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#contact"&Contact&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&/ul&
&&&&&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&&&&&!--/.nav-collapse --&&/div&
&&&&&&&&&/div&
&&&&&/div&
&&&&&div class="container"&
&&&&&&&&&!-- Main hero unit for a primary marketing message or call to action --&
&&&&&&&&&div class="leaderboard"&
&&&&&&&&&&&&&h1&w3cschool Web Store&/h1&
&&&&&&&&&&&&&p&Try and purchase HTML5, JS, Ruby, PHP-MySQL based web apps to enhance your productivity at affordable price.&/p&
&&&&&&&&&&&&&p&
&&&&&&&&&&&&&&&&&a class="btn btn-success btn-large"&Sign Up for a 30 day free trial&/a&&/p&
&&&&&&&&&/div&
&&&&&&&&&!-- Example row of columns --&
&&&&&&&&&div class="row"&
&&&&&&&&&&&&&div class="span4"&
&&&&&&&&&&&&&&&&&h2&HTML5 and JS Apps&/h2&
&&&&&&&&&&&&&&&&&p&Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.&/p&
&&&&&&&&&&&&&&&&&p&
&&&&&&&&&&&&&&&&&&&&&a class="btn btn-success btn-large" href="#"&View apps&/a&&/p&
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&div class="span4"&
&&&&&&&&&&&&&&&&&h2&Ruby Apps&/h2&
&&&&&&&&&&&&&&&&&p&Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.&/p&
&&&&&&&&&&&&&&&&&p&
&&&&&&&&&&&&&&&&&&&&&a class="btn btn-success btn-large" href="#"&View apps&/a&&/p&
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&div class="span4"&
&&&&&&&&&&&&&&&&&h2&PHP MySQL Apps&/h2&
&&&&&&&&&&&&&&&&&p&Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.&/p&
&&&&&&&&&&&&&&&&&p&
&&&&&&&&&&&&&&&&&&&&&a class="btn btn-success btn-large" href="#"&View apps&/a&&/p&
&&&&&&&&&&&&&/div&
&&&&&&&&&/div&
&&&&&&&&&hr&
&&&&&&&&&footer&
&&&&&&&&&&&&&p&& Company 2012&/p&
&&&&&&&&&/footer&
&&&&&/div&
&&&&&!-- /container --&
&&&&&!-- Le javascript==================================================- -&
&&&&&!-- Placed at the end of the document so the pages load faster --&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"&&/script&
如果想要创建一个非固定的布局，即基于百分比的布局，以便让布局更灵活，请看这部分教程。
&div class="container-fluid"&
&div class="row-fluid"&
&div class="span2"&
&!--Sidebar content--&
&div class="span10"&
&!--Body content--&
bootstrap.css（位于 bootstrap 的主文件夹的 docs\assets\css 下）的第 274 到 285 行，为创建主容器渲染样式，从而创建一个流动布局。流动布局的目的是为网页或 app 创建一个基于百分比的布局（比如，width=20%）。
下面的代码创建一个网页流动布局。为了定制，除了默认样式，还需创建一个新的 css 文件 example-fluid-layout.css，与 bootstrap.css 位于同一个文件夹下。
padding-top: 60
padding-bottom: 40
padding-top: 5
.sidebar-nav {
padding: 9px 0;
.leaderboard {
padding: 60
margin-bottom: 30
background-image: url('/twitter-bootstrap/images/gridbg.gif');
background-repeat:
-webkit-border-radius: 6
-moz-border-radius: 6
border-radius: 6
.leaderboard h1 {
font-size: 40
margin-bottom: 5
line-height: 1;
letter-spacing: -1
color:#FF6600;
.leaderboard p {
font-size: 18
font-weight: 200;
line-height: 27
background-image: url('/twitter-bootstrap/images/gridbg.gif');
background-repeat:
-webkit-border-radius: 6
-moz-border-radius: 6
border-radius: 6
.nav .nav-header {
font-size: 18
color:#FF9900;
&!DOCTYPE html&
&html lang="en"&
&&&&&meta charset="utf-8"&
&&&&&title&使用Bootstrap 版本 2.0 固定布局的实例&/title&
&&&&&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&&&&&meta name="description" content="Example of Fluid Layout with Bootstrap version 2.0 from w3cschool.cc"&
&&&&&meta name="author" content=""&
&&&&&!-- Le styles --&
&&&&&link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"&
&&&&&link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/example-fluid-layout.css" rel="stylesheet"&
&&&&&!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --&
&&&&&!--[if lt IE 9]&
&&&&&script src="///svn/trunk/html5.js"&&/script&
&&&&&![endif]--&
&&&&&!-- Le fav and touch icons --&
&&&&&link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico"&
&&&&&link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png"&
&&&&&link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png"&
&&&&&link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png"&&/head&
&&&&&div class="navbar navbar-fixed-top"&
&&&&&&&&&div class="navbar-inner"&
&&&&&&&&&&&&&div class="container-fluid"&
&&&&&&&&&&&&&&&&&a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&
&&&&&&&&&&&&&&&&&&&&&span class="icon-bar"&&/span&
&&&&&&&&&&&&&&&&&&&&&span class="icon-bar"&&/span&
&&&&&&&&&&&&&&&&&&&&&span class="icon-bar"&&/span&
&&&&&&&&&&&&&&&&&/a&
&&&&&&&&&&&&&&&&&a class="brand" href="#"&
&&&&&&&&&&&&&&&&&&&&&img src="/images/w3r.png" width="111" height="30" alt="w3cschool logo" /&&/a&
&&&&&&&&&&&&&&&&&div class="nav-collapse"&
&&&&&&&&&&&&&&&&&&&&&ul class="nav"&
&&&&&&&&&&&&&&&&&&&&&&&&&li class="active"&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#"&Home&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#about"&About&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#contact"&Contact&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&/ul&
&&&&&&&&&&&&&&&&&&&&&p class="navbar-text pull-right"&Logged in as
&&&&&&&&&&&&&&&&&&&&&&&&&a href="#"&username&/a&&/p&
&&&&&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&&&&&!--/.nav-collapse --&&/div&
&&&&&&&&&/div&
&&&&&/div&
&&&&&div class="container-fluid"&
&&&&&&&&&div class="row-fluid"&
&&&&&&&&&&&&&div class="span3"&
&&&&&&&&&&&&&&&&&div class="well sidebar-nav"&
&&&&&&&&&&&&&&&&&&&&&ul class="nav nav-list"&
&&&&&&&&&&&&&&&&&&&&&&&&&li class="nav-header"&Frontend&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li class="active"&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#"&HTML 4.01&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#"&HTML5&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#"&CSS&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#"&JavaScript&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#"&Twitter Bootstrap&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#"&Firebug&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li class="nav-header"&Backend&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#"&PHP&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#"&SQL&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#"&MySQL&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#"&PostgreSQL&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a href="#"&MongoDB&/a&&/li&
&&&&&&&&&&&&&&&&&&&&&/ul&
&&&&&&&&&&&&&&&&&/div&&!--/.well --&
&&&&&&&&&&&&&/div&&!--/span--&
&&&&&&&&&&&&&div class="span9"&
&&&&&&&&&&&&&&&&&div class="leaderboard"&
&&&&&&&&&&&&&&&&&&&&&h1&Learn. Practice. Develop.&/h1&
&&&&&&&&&&&&&&&&&&&&&p&w3cschool offers web development tutorials. We believe in Open Source. Love standards. And prioritize simplicity and readability while serving content.&/p&
&&&&&&&&&&&&&&&&&&&&&p&
&&&&&&&&&&&&&&&&&&&&&&&&&a class="btn btn-success btn-large"&Join w3cschool now&/a&&/p&
&&&&&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&&&&&div class="row-fluid"&
&&&&&&&&&&&&&&&&&&&&&div class="span4"&
&&&&&&&&&&&&&&&&&&&&&&&&&h2&Learn&/h2&
&&&&&&&&&&&&&&&&&&&&&&&&&p&Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.&/p&
&&&&&&&&&&&&&&&&&&&&&&&&&p&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a class="btn btn-success btn-large" href="#"&Start Learning now&/a&&/p&
&&&&&&&&&&&&&&&&&&&&&/div&&!--/span--&
&&&&&&&&&&&&&&&&&&&&&div class="span4"&
&&&&&&&&&&&&&&&&&&&&&&&&&h2&Practice&/h2&
&&&&&&&&&&&&&&&&&&&&&&&&&p&Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.&/p&
&&&&&&&&&&&&&&&&&&&&&&&&&p&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a class="btn btn-success btn-large" href="#"&Start percticing now&/a&&/p&
&&&&&&&&&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&&&&&&&&&!--/span--&
&&&&&&&&&&&&&&&&&&&&&div class="span4"&
&&&&&&&&&&&&&&&&&&&&&&&&&h2&Develop&/h2&
&&&&&&&&&&&&&&&&&&&&&&&&&p&Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.&/p&
&&&&&&&&&&&&&&&&&&&&&&&&&p&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a class="btn btn-success btn-large" href="#"&Start developing now&/a&&/p&
&&&&&&&&&&&&&&&&&&&&&/div&&!--/span--&
&&&&&&&&&&&&&&&&&/div&&!--/row--&
&&&&&&&&&&&&&&&&&hr&
&&&&&&&&&&&&&&&&&footer&
&&&&&&&&&&&&&&&&&&&&&p&& Company 2012&/p&
&&&&&&&&&&&&&&&&&/footer&
&&&&&&&&&&&&&/div&
&&&&&&&&&/div&
&&&&&/div&&!--/.fluid-container--&
&&&&&!-- Le javascript==================================================- -&
&&&&&!-- Placed at the end of the document so the pages load faster --&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"&&/script&
&&&&&script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"&&/script&
记住登录状态
重复输入密码Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统的相关资料,需要的朋友可以参考下
栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。
1692年，新登基的法国国王路易十四感到法国的印刷水平差强人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。
我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
也就是说Bootstrap把一个元素的宽度划分成12份。我们则在这个被划分成12份的行安排元素。
一、基本目标
制作如下的两行，这两行因为设备的不同里面各个单元格的宽度会改变：
在手机小屏幕上，上行A占2份B占10份，AB分享了这12份，下行A占1份B占1份C占10份，ABC分享了这12份。
在平板的中等屏幕上，上行A占8份B占4份，AB分享了这12份，下行A占10份B占1份C占1份，ABC分享了这12份。
在PC的大屏幕上，上行A占4份B占8份，AB分享了这12份，下行A占1份B占10份C占1份，ABC分享了这12份。
二、制作过程
先在网页文件夹中配置好Bootstrap，在官网（点击打开链接）下载组件即可，用于生产环境的Bootstrap版本（点击打开链接），Bootstrap3对2并不兼容，建议直接根据其开发文档使用Bootstrap3。将Bootstrap解压之后把得到的3个文件夹css,fonts,js拷贝到站点目录下面。如果是Eclipse的JSP Web Project的话就把它们放到WebRoot文件夹下面。
之后代码如下，详情请看注释：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&!--网页编码，要使用的外部文件，自动适应屏幕--&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&link href="css/bootstrap.css" rel="stylesheet" media="screen"&
&meta name="viewport"
content="width=device-width,initial-scale=1.0,user-scalable=no"&
&title&栅格系统&/title&
&!--使用Bootstrap如果不使用面板的话，要把元素放进一个占满100%屏幕的容器里--&
&!--class="container"则自动居中--&
&div class="container-fluid"&
&!--定义一行--&
&div class="row"&
&!--xs代表手机小屏幕，md代表平板中屏幕，lg代表PC大屏幕--&
&!--同一对的元素之和必须等于12，否则出现错误，如A的col-xs-2+B的col-xs-10是等于12的--&
&!--bg-warning是定义浅黄色的背景色--&
&div class="col-xs-2 col-md-8 col-lg-4 bg-warning"&
&div class="col-xs-10 col-md-4 col-lg-8 bg-primary"&
&div class="row"&
&!--这里的道理与上面的一样，A的col-xs-1+B的col-xs-1+C的col-xs-10是等于12的--&
&div class="col-xs-1 col-md-10 col-lg-1 bg-warning"&
&div class="col-xs-1 col-md-1 col-lg-10 bg-primary"&
&div class="col-xs-10 col-md-1 col-lg-1 bg-success"&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具怎样让bootstrap设计的页面在手机端也能响应式自适应
怎样让bootstrap设计的页面不仅在电脑浏览器是响应式在手机端也是响应式呢？
也就是电脑端不同分辨率下的浏览效果跟相应分辨率下的手机端浏览效果是一样的呢？
闲话少说，直接上图看效果：
在用bootstrap设计好页面,并在火狐浏览器上进行调试,效果图如下：
但是在手机端浏览的时候发现整个页面被缩小的很小,连文字都看不清：
为什么会这样呢？
为什么bootstrap设计出来的页面样式虽然都一样,但是在手机端
显示的只是整个页面都缩小而不是响应式的呢？
后来才发现凡是bootstrap设计的页面都带有标签头:
&&meta name="viewport"
content="width=device-width, initial-scale=1"&
只要每个页面都加上这样的标签头,电脑端和手机端的效果就会保持一致，加了标签头
的效果图如下：
手机端和电脑端相同分辨率下的效果就保持一致了，
因为bootstrap设计的页面首先考虑的是移动端,
所以我们设计的响应式布局的页面
能很好的适应移动端、电脑端、平板等各种不同分辨率的设备.
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。