您好，欢迎来到WEB 前端资源网！(/)
Bootstrap 前端框架网页布局的使用介绍
发布时间：Nov 24 2012 1:42 PM
Bootstrap 做为一款优秀的前端框架，已经集成了网页布局的功能，利用此集成功能可以让我们轻松实现简单或复杂的网页布局！最重要的是有利于团队合作开发和后期项目维护！
Bootstrap 布局是标准的12列框架！使用起来也很方便，布局中常用的.c l a s s 样式如下：
.c o n t a i n e r .c o n t a i n e r -f l u i d .r o w .r o w -f l u i d .s p a n 1——.s p a n 12o f f s e t 1-o f f s e t 12
利用上述几个样式不同的组合就可以轻松搞定简单或复杂的网页布局！下面我将实例为大家介绍布局的实现。
12列简单布局的示例
通过示例明白什么是标准的12列框架！12列布局在线示例 (/Media/Default/bootstrap-demo/Layout1.html)
上面示例运用了.c o n t a i n e r .r o w .s p a n 自定义了一个样式。怎么样是不是感觉Bootstrap 布局很方便
PSD 素材
(/Tags/psd 素材)网页模板
(/Tags/网页模板)jQuery 插件(/Tags/jQuery 插件)
WEB 代码酷
(ww
开源CMS
Orchard (hardproject/)Drupal (/)Joomla (/)DNN (www.dotnetnuke/)
开源商城Nopcommerce
(pcommerce/default.asp Magento (www.magentocommerce.c
OpenCart (www.opencart/)
开源博客WordPress (
blogengine (www.dotnetblogengine.n
开源论坛Discuz! X (www.discuz/)Phpwind (www.phpwind/)phpBB (www.phpbb/)JS 框架jQuery (jquery/)YUI (yuilibrary/)Knockout (knockoutjs/)
KISSY (docs.kissyui/)前端框架Bootstrap (twitter.github/bootst Foundation (foundation.zurb/)YAML (www.yaml.de/)
UI 框架jQuery UI (jqueryui/)jQuery Tools (/)
Wijmo (wijmo/)国内外优秀项目推荐更多优秀开源项目欢迎大家与我们交流讨论jQuery 交流QQ ：233808513
Bootstrap 前端框架QQ :233808496 Orchard CMS 交流QQ ：187502451 NopCommerce 开源商城QQ ：257030849新浪微博TA 的粉丝(112)
風-v-塵云南 昆明加关注3月23日 21:56转发和阳光的人在一起，心里就不会晦暗；和快乐的人在一起，嘴角就常带微笑；和进取的人在一起，行动就不会落后；和大方的人在一起，处事就不小气；和睿智的人在一起，遇事就不迷茫；和
聪明的人在一起，做事就变机敏。——借人之智，完善自己。学最好的别人，做最好的自己。jQuery
插件——完美的可控制左右上下滚动条效果 - 布局&Layout & Interface - WEB 代码酷-致力首页 (/)Web (/web)jQuery (/jquery)设计 (/design)Bootstrap (/bootstrap)Orchard (/orchard)前端志 (/about)
1234567891011121314151617181920212223242526272829303132333435363738394041424344
<!D O C T Y P E  h t m l ><h t m l  l a n g ="z h -c n ">
<h e a d >
<m e t a  h t t p -e q u i v ="C o n t e n t -T y p e " c o n t e n t ="t e x t /h t m l ; c h a r s e t =u t f -8" />    <t i t l e >B o o t s t r a p 网页布局使用介绍</t i t l e >    <l i n k  h r e f ="c s s /b o o t s t r a p .m i n .c s s " r e l ="s t y l e s h e e t " />
<s t y l e  t y p e ="t e x t /c s s ">        /*自定义样式，实现个性化页面*/        .s h o w -g r i d  { m a r g i n -t o p : 10p x ; m a r g i n -b o t t o m : 20p x ; }
.s h o w -g r i d  [c l a s s *="s p a n "] { b a c k g r o u n d -c o l o r :#e e e ;t e x t -a l i g n :c e n t e r ;h e i g h t :40p x ;l i n e -h e i g h t :40p x ;b o r d e r -r a d i u
.s h o w -g r i d  [c l a s s *="s p a n "]:h o v e r  { b a c k g r o u n d -c o l o r : #d d d ; }
</s t y l e >
</h e a d >
<b o d y >
<d i v  c l a s s ="c o n t a i n e r ">        <d i v  c l a s s ="r o w  s h o w -g r i d ">            <d i v  c l a s s ="s p a n 1">.s p a n 1</d i v >            <d i v  c l a s s ="s p a n 1">.s p a n 1</d i v >            <d i v  c l a s s ="s p a n 1">.s p a n 1</d i v >
<d i v  c l a s s ="s p a n 1">.s p a n 1</d i v >
<d i v  c l a s s ="s p a n 1">.s p a n 1</d i v >            <d i v  c l a s s ="s p a n 1">.s p a n 1</d i v >            <d i v  c l a s s ="s p a n 1">.s p a n 1</d i v >
<d i v  c l a s s ="s p a n 1">.s p a n 1</d i v >
<d i v  c l a s s ="s p a n 1">.s p a n 1</d i v >            <d i v  c l a s s ="s p a n 1">.s p a n 1</d i v >            <d i v  c l a s s ="s p a n 1">.s p a n 1</d i v >            <d i v  c l a s s ="s p a n 1">.s p a n 1</d i v >        </d i v >        <d i v  c l a s s ="r o w  s h o w -g r i d ">            <d i v  c l a s s ="s p a n 2">.s p a n 2</d i v >
<d i v  c l a s s ="s p a n 3">.s p a n 3</d i v >
<d i v  c l a s s ="s p a n 7">.s p a n 7</d i v >        </d i v >        <d i v  c l a s s ="r o w  s h o w -g r i d ">
<d i v  c l a s s ="s p a n 4">.s p a n 4</d i v >
<d i v  c l a s s ="s p a n 8">.s p a n 8</d i v >
</d i v >        <d i v  c l a s s ="r o w  s h o w -g r i d ">            <d i v  c l a s s ="s p a n 12">.s p a n 12</d i v >        </d i v >    </d i v ></b o d y ></h t m l >
?
Bootstrap前端框架o f f s e t配合.c o n t a i n e r.r o w.s p a n使用布局示例
在线示例 (/Media/Default/bootstrap-demo/Layout2.html)
Bootstrap前端框架嵌套布局实现复杂网页示例
在线示例 (/Media/Default/bootstrap-demo/Layout3.html)
WEB代码酷 (www.aspxcs)
锐想Magento (www.ruiwant)
烟台网站建设 ()
Orchard中文社区 (hardch
科技创新LuckyGir raycg i摄机构
qiuzhang html5程Orchard亚太盛
友情链接
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!D O C T Y P E h t m l>
<h t m l l a n g="z h-c n">
<h e a d>
<m e t a h t t p-e q u i v="C o n t e n t-T y p e"c o n t e n t="t e x t/h t m l;c h a r s e t=u t f-8"/>
<m e t a n a m e="a u t h o r"c o n t e n t="W e b前端资源网——打造国内最好、最专业的前端资源站！w w w.58i m g.c o m"
<t i t l e>B o o t s t r a p网页布局使用介绍-12列布局</t i t l e>
<l i n k h r e f="c s s/b o o t s t r a p.m i n.c s s"r e l="s t y l e s h e e t"/>
<s t y l e t y p e="t e x t/c s s">
/*自定义样式，实现个性化页面*/
.s h o w-g r i d{m a r g i n-t o p:10p x;m a r g i n-b o t t o m:20p x;}
.s h o w-g r i d[c l a s s*="s p a n"]{b a c k g r o u n d-c o l o r:#e e e;t e x t-a l i g n:c e n t e r;m i n-h e i g h t:40p x;l i n e-h e i g h t:40p x;b .s h o w-g r i d[c l a s s*="s p a n"]:h o v e r{b a c k g r o u n d-c o l o r:#d d d;}
</s t y l e>
</h e a d>
<b o d y>
<d i v c l a s s="c o n t a i n e r">
<h3>B o o t s t r a p前端框架o f f s e t配合.c o n t a i n e r.r o w.s p a n使用布局示例</h3>
<d i v c l a s s="r o w s h o w-g r i d">
<d i v c l a s s="s p a n3o f f s e t1">.s p a n3，.o f f s e t1</d i v>
<d i v c l a s s="s p a n6o f f s e t2">.s p a n6，.o f f s e t2</d i v>
</d i v>
<d i v c l a s s="r o w s h o w-g r i d">
<d i v c l a s s="s p a n4">.s p a n4</d i v>
<d i v c l a s s="s p a n4o f f s e t4">.s p a n4，.o f f s e t4</d i v>
</d i v>
<d i v c l a s s="r o w s h o w-g r i d">
<d i v c l a s s="s p a n3o f f s e t3">.s p a n3，.o f f s e t3</d i v>
<d i v c l a s s="s p a n3o f f s e t3">.s p a n3，.o f f s e t3</d i v>
</d i v>
<d i v c l a s s="r o w s h o w-g r i d">
<d i v c l a s s="s p a n6o f f s e t6">.s p a n6，.o f f s e t6</d i v>
</d i v>
</d i v>
</b o d y>
</h t m l>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!D O C T Y P E h t m l>
<h t m l l a n g="z h-c n">
<h e a d>
<m e t a h t t p-e q u i v="C o n t e n t-T y p e"c o n t e n t="t e x t/h t m l;c h a r s e t=u t f-8"/>
<m e t a n a m e="a u t h o r"c o n t e n t="W e b前端资源网——打造国内最好、最专业的前端资源站！w w w.58i m g.c o m"
<t i t l e>B o o t s t r a p网页布局使用介绍-12列布局</t i t l e>
<l i n k h r e f="c s s/b o o t s t r a p.m i n.c s s"r e l="s t y l e s h e e t"/>
<s t y l e t y p e="t e x t/c s s">
/*自定义样式，实现个性化页面*/
/*示例一*/
.s h o w-g r i d{m a r g i n-t o p:10p x;m a r g i n-b o t t o m:20p x;}
.s h o w-g r i d[c l a s s*="s p a n"]{b a c k g r o u n d-c o l o r:#e e e;t e x t-a l i g n:c e n t e r;m i n-h e i g h t:40p x;l i n e-h e i g h t:40p x;论坛前端模板
.s h o w-g r i d[c l a s s*="s p a n"]:h o v e r{b a c k g r o u n d-c o l o r:#d d d;}
.s h o w-g r i d.s h o w-g r i d[c l a s s*="s p a n"]{b a c k g r o u n d-c o l o r:#c c c;}
/*示例2*/
.s h o w-g r i d2{b a c k g r o u n d-c o l o r:#e e e;p a d d i n g-b o t t o m:20p x;}
.s h o w-g r i d2[c l a s s*="s p a n"]{t e x t-a l i g n:c e n t e r;m i n-h e i g h t:40p x;l i n e-h e i g h t:40p x;p a d d i n g-b o t t o m:20p x;} .b g[c l a s s*="s p a n"]{b a c k g r o u n d-c o l o r:#d d d;m i n-h e i g h t:40p x;l i n e-h e i g h t:40p x;p a d d i n g-b o t t o m:20p x;}
?
?
通过上边的三个示例，不知道你对Bootstrap 布局有所了解了吗？希望学习
Bootstrap 的同学都动手实践一下。
下边有几个关于布局的注意点：
1）在本文中只引用了B o o t s t r a p .m i n .c s s 文件，那么.c o n t a i n e r 的宽度为960.如果引入
了b o o t s t r a p -r e s p o n s i v e .m i n .c s s 则.c o n t a i n e r 宽度则随着你的显示设置改变，具体内查看b o o t s t r a p .c s s 源码
2).c o n t a i n e r -f l u i d .r o w -f l u i d 为100%显示！
更多布局方式等着你的实践，本文只是简单介绍了一些常用的方法！希望本文对你有所帮助！如你对本文有什么意见可以直接留言或加QQ 流：233808496
Tags: Bootstrap 基础 (/Tags/Bootstrap%E5%9F%BA%E7%A1%80)
1819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
.b g  [c l a s s *="s p a n "] { b a c k g r o u n d -c o l o r : #d d d ; m i n -h e i g h t : 40p x ; l i n e -h e i g h t : 40p x ;p a d d i n g -b o t t o m :20p x ;}
.b g 2 [c l a s s *="s p a n "] { b a c k g r o u n d -c o l o r : #c c c ;m i n -h e i g h t : 40p x ; l i n e -h e i g h t : 40p x ;p a d d i n g -b o t t o m :20p x ;}    </s t y l e ></h e a d ><b o d y >    <d i v  c l a s s ="c o n t a i n e r ">        <h 3>B o o t s t r a p 前端框架嵌套布局实现复杂网页示例（一）</h 3>        <d i v  c l a s s ="r o w  s h o w -g r i d ">            <d i v  c l a s s ="s p a n 12">                <h 4>.s p a n 12</h 4>                <d i v  c l a s s ="r o w -f l u i d  s h o w -g r i d ">                    <d i v  c l a s s ="s p
a n 6">.s p a n 6</d i v >                    <d i v  c l a s s ="s p a n 6">.s p a n 6</d i v >                </d i v >                <d i v  c l a s s ="r o w -f l u i d  s h o w -g r i d ">                    <d i v  c l a s s ="s p a n 12">.s p a n 12</d i v >                </d i v >            </d i v >        </d i v >        <h 3>B o o t s t r a p 前端框架嵌套布局实现复杂网页示例（二）</h 3>        <d i v  c l a s s ="r o w  s h o w -g r i d 2">            <d i v  c l a s s ="s p a n 12">                <h 4>.s p a n 12</h 4>                <d i v  c l a s s ="r o w -f l u i d  b g ">                    <d i v  c l a s s ="s p a n 4">                        <h 4>.s p a n 4</h 4>                        <d i v  c l a s s ="r o w -f l u i d  b g 2">                            <d i v  c l a s s ="s p a n 6">.s p a n 6</d i v >                            <d i v  c l a s s ="s p a n 6">.s p a n 6</d i v >                        </d i v >                    </d i v >                    <d i v  c l a s s ="s p a n 8">                        <h 4>.s p a n 8</h 4>                        <d i v  c l a s s ="r o w -f l u i d  b g 2">                            <d i v  c l a s s ="s p a n 4">.s p a n 4</d i v >                            <d i v  c l a s s ="s p a n 8">.s p a n 8</d i v >                        </d i v >                    </d i v >                </d i v >            </d i v >        </d i v >    </d i v ></b o d y ></h t m l >
共有0人喜欢  共2条评论
登录
社区按时间排序
ヾ∮淡出§ツ²º¹³ (qzone.qq/)(QQ 空间 (qzone.qq/))回复
顶
2月5日 13:18
風※☆塵 (qzone.qq/)(QQ 空间 (qzone.qq/))回复
顶
2月6日 09:00
(www.58img/jquery/46)
(www.58img/web/84)
学习下做后端应用不错哈，最后根据需求提取自己想要的class 。
@ヾ∮淡出§ツ²º¹³: 做前端和后端都比较适合的，特别适合团队多人开发！
更多热评文章
请输入你的评论
发  布
(qzone.qq/)
(qzone.qq/)Masonry （简单实现瀑布流不规则布局的使用）
20个优秀的前端框架
Bootstrap 中Modal 的使用介绍
优秀的开源前端框架简介
140
本站由Orchard 1.6开源项目驱动
(wwwzz/stat/website.php?web_id=4679065) ICP 备案：滇ICP 备12001764号-1    业务合作联系QQ ：373638128    Email:navy1015@126    本站主
作：風塵    Sign In (/Users/Account/LogOn?ReturnUrl=%2Fbootstrap%2F45)
(www.58img/bootstrap/61)(www.58img/bootstrap/28)
友言[?] ()

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。