Bootstrap 布局.pdfVIP

Bootstrap 布局 Bootstrap 布局 简介 在本教程中，您将学习如何使⽤ Bootstrap ⼯具包来创建固定布局和流动布局。教程 是基于 Bootstrap 本 2.0 。 在 本 2.0 中，Bootstrap 为⼿机、平板电脑、笔记本、⼩型台式机、⼤型宽屏台式机 等添加了响应特性。 可以通过向页⾯添加 bootstrap-responsive .css ⽂件 （位于 docs\assets\css 下）来让布局 具有响应性。 Bootstrap 固定布局 如果您想要创建基于固定像素数的⽹页或 app ，请看这部分的教程。 ⽤法 body div class=container ... /div /body 解释 bootstrap .css （位于 bootstrap 的主⽂件夹的 docs\assets\css 下）的第 261 到 273 ⾏，为 创建主容器渲染样式，从⽽创建⼀个固定布局。固定布局的⽬的是为⽹页或 app 创建 ⼀个 940 像素 （默认）宽的布局。 Bootstrap 固定布局的实例 下⾯的代码创建⼀个⽹页固定布局。为了定制，除了默认样式，还需创建⼀个新的 css ⽂件 example-fixed-layo t .css ，与 bootstrap .css 位于同⼀个⽂件夹下。 CSS 代码 body { padding-top: 60px; padding-bottom: 0px; } .nav li { padding-top: 5px; } .leaderboard { padding: 60px; margin-bottom: 30px; background-image: url(/twitter-bootstrap/images/gridbg.gif); background-repeat:repeat; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .leaderboard h1 { font-size: 0px; margin-bottom: 5px; line-height: 1; letter-spacing: -1px; color:#FF6600; } .leaderboard p { font-size: 18px; font-weight: 200; line-height: 27px; } HTML 代码 实例 !DOCTYPE html html lang=en head meta charset= tf-8 title使⽤Bootstrap 本 2.0 固定布局的实例/title meta name=viewport content=width=device-width , initial-scale= 1.0 meta name=description content=Example of Fixed Layo t with Bootstrap version 2.0 from w3cschool .cn meta name=a thor 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-layo t .css rel=stylesheet !-- Le HTML5 shim , for IE6-8 s pport of HTML5 elements -- !--[if lt IE 9] script src=//html5shim .googlecode .com/svn/tr nk/html5.j s/script ![endif]-- !-- Le fav and to ch icons -- link rel=shortc t icon href=../