【前端框架之Bootstrap 02】布局与导航

前言

距离上次有几天时间了，其实我这段时间也多多少少在看这块，但是效果不好啊！

我就在那里捣鼓捣鼓，搞了半天还是一头雾水，可能是老夫真的老了吧，学习新东西还是不行了！

所以老夫这里就要开始无耻了，我准备一点一点的研究之，有时候抄袭官网大家就多包涵了哦。

我最近也使用了bootstrap来布局，来搞导航。但是效果很不理想，所以我这里先来系统的看看这两块，若是仍然一头雾水的话，那么。。。。我就再学习就完了。

好了，废话结束，我们进入今天的学习吧。

栅格系统

说道栅格系统，我们还是先解释一下他吧，虽然大家都知道：

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，其实是一回事。

不过从定义上说，栅格更为准确些，从维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、

标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，

其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

以上不是我们关注的重点，所以我们直接看bootstrap的实现吧，我们先来看看他的描述：

对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。

由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。

最基本的栅格系统

复制代码

1 <html xmlns="http://www.w3.org/1999/xhtml">

2 <head>

3 <title></title>

4 <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

5 <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />

6 <script src="js/bootstrap.js" type="text/javascript"></script>

7 <style type="text/css">

8 .span4 { background-color: #EEEEEE; }

9 .span8 { background-color: #EEEEEE; }

11 </style>

12 </head>

13 <body>

14 <div class="row">

15 <div class="span4">

16 我在左边<br /><br /><br /></div>

17 <div class="span8">

18 我在右边</div>

19 </div>

20 </body>

21 </html>

复制代码

我学聪明了，我之前就抄了下代码、看了下效果然后就完了，我今天聪明了！！！我绝对不会去看那5000行css代码，于是我们来看页面上的css吧。。。

复制代码

1 .row { margin-left: -20px; }

2 .row:before, .row:after { content: ""; display: table; line-height: 0; }

3 .row:after { clear: both; }

4 .span4 { width: 228px; }

5 .row { margin-left: -20px; }

6 .row:before, .row:after { content: ""; display: table; line-height: 0; }

7 .row:after { clear: both; }

8 [class*="span"] { float: left; margin-left: 20px; min-height: 1px; }

复制代码

这个span是float，按照float不应该用于布局的说法，我其实会小小的抱怨一番的，但是还是先接受之，起分别心不好。

按照他这种做法，每起一行就需要一个row容器，所以我们多搞两列试试。

复制代码

1 <body>

2 <div class="row">

3 <div class="span4">

4 我在左边<br />

5 <br />

6 <br />

7 </div>

8 <div class="span8">

9 我在右边</div>

10 </div>

11 <div class="row">

12 <div class="span8">

13 我在左边<br />

14 <br />

15 <br />

16 </div>

17 <div class="span4">

18 我在右边</div>

19 </div>

20 <div class="row">

21 <div class="span6">

22 我在左边<br />

23 <br />

24 <br />

25 </div>

26 <div class="span6">

27 我在右边</div>

28 </div>

29 </body>

复制代码

我们需要保证每一行里面的“span”相加之和是12即可，而且他支持响应式布局的，其实说响应式布局不合适，我们来看看屏幕变小会怎样：

复制代码

1 @media (max-width: 767px) {

2 [class*="span"],

3 .uneditable-input[class*="span"],

4 .row-fluid [class*="span"] {

5 display: block;

6 float: none;

7 width: 100%;

8 margin-left: 0;

9 -webkit-box-sizing: border-box;

10 -moz-box-sizing: border-box;

11 box-sizing: border-box;

12 }

13 }

复制代码

我们看到在小于一定数值的时候，span的宽度会变为100%，所以我们就不要去惹他了。。

偏移列

bootstrap定义了很多类，他的类搞得很完善了，比如我们要把列向右移动的话就可以使用.offset*。

.offset4 可以将span向右移动4个列的宽度，于是我们来试试：

嵌套列

嵌套的情况总是无处不在，我们来在第一个列里面嵌套一番吧，嵌套也是需要row容器的：

复制代码

1 <div class="row">

2 <div class="span2">

3 我在左边<br />

4 <br />

5 <br />

6 </div>

7 <div class="span10">

8 嵌了一个套

9 <div class="row ">

10 <div class="span4">

11 我在左边<br />

12 <br />

13 </div>

14 <div class="span6">

15 我在右边</div>

16 </div>

17 </div>

18 </div>

复制代码

我这样一嵌套，结果嵌套里面两个又不按套路出牌了。。。这是怎么回事呢？？？哎，我也不知道，于是来摸索下吧。

他这个span 有个margin-left: 20px 的属性，所以导致换行了，我以为应该会自己处理呢。。。所以这里就用流式布局吧：

复制代码

1 <div class="row">

2 <div class="span2">

3 我在左边<br />

4 <br />

5 <br />

6 </div>

7 <div class="span10">

8 嵌了一个套

9 <div class="row-fluid ">

10 <div class="span4">

11 我在左边<br />

12 <br />

13 </div>

14 <div class="span8">

15 我在右边</div>

16 </div>

17 </div>

18 </div>

复制代码

布局暂时写到这里，我们接下来看看导航。

导航

首先，我们来看看最基本的导航样式：

1 <ul class="nav nav-tabs">

2 <li class="active"><a href="#">首页</a> </li>

3 <li><a href="#">我的博客</a></li>

4 <li><a href="#">联系我们</a></li>

5 </ul>

于是一个导航就出来啦，我们看他看着还不错呢！于是我们看下他的代码，我这里看几个关键点便是：

复制代码

.nav-tabs {

border-bottom: 1px solid #DDDDDD;

}

.nav-tabs > li {

margin-bottom: -1px;

}

.nav-tabs > li, .nav-pills > li {

float: left;

}

.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {

-moz-border-bottom-colors: none;

-moz-border-left-colors: none;

-moz-border-right-colors: none;

-moz-border-top-colors: none;

background-color: #FFFFFF;

border-color: #DDDDDD #DDDDDD transparent;

border-image: none;

border-style: solid;

border-width: 1px;

color: #555555;

cursor: default;

}

.nav-tabs > li > a {

border: 1px solid transparent;

border-radius: 4px 4px 0 0;

line-height: 20px;

padding-bottom: 8px;

padding-top: 8px;

}

.nav-tabs > li > a, .nav-pills > li > a {

line-height: 14px;

margin-right: 2px;

padding-left: 12px;

padding-right: 12px;

}

.nav > li > a {

display: block;

}

a {

color: #0088CC;

text-decoration: none;

}

复制代码

这块CSS基本可以完成功能了，但是这种导航不好看，还真不好看呢。所以我们看看其它的样式吧：

只是换了个class就改变了我们的导航，真的不错哦，这个导航还是挺好看的。

加一个nav-stacked后又可以水平排列了，这个样式用于手机是很不错的

导航条

导航条是我们真实需要的，一般都会有个颜色很不错的导航条，我们来看看bootstrap的导航呢。

复制代码

1 <div class="navbar">

2 <div class="navbar-inner">

3 <a class="brand" href="#">叶小钗</a>

4 <ul class="nav">

5 <li class="active"><a href="#">首页</a></li>

6 <li><a href="#">我的博客</a></li>

7 <li><a href="#">关于我们</a></li>

8 </ul>

9 </div>

10 </div>

复制代码

这个导航条还是挺好看的，就是感觉他有点暗淡。。。。

品牌

<aclass="brand"href="#">Project name</a>这块地方展示的是品牌名称

PS：他的CSS中用了大量的float: left，我怎么感觉有点不爽呢！

分隔符

<liclass="divider-vertical"></li>

需要分隔符的地方加一个这个家伙就可以了：

结语

今天简单的看了下导航和布局，其实两块地方还是有很多东西的，比如现在的导航其实还是有许多东西要自己做的。

bootstrap提供了一些很不错的东西，能不能用好就是我们自己的事情啦。中文了大家午安。

您可以考虑给小钗发个小额微信红包以资鼓励

本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/archive/2013/06/08/3125875.html如需转载请自行联系原作者

【前端框架之Bootstrap 02】布局与导航相关推荐

Web前端框架学习—Bootstrap
零. 写在前面 Bootstrap是一个非常好的前端框架,在前端时间的小项目中需要使用Bootstrap做前端,于是就学习了一下,觉得非常好用,推荐给新手. 一. 什么是Bootstrap? Boot ...
前端框架之bootstrap学习(一)
Bootstrap介绍 2011年8月,Twitter的设计师Mark Otto和Jacob Thornton发布了一个前端开发工具:Bootstrap.2012年2月,Bootstrap 2.0发布 ...
前端框架之bootstrap框架基本介绍及常用UI框架
前端框架之:bootstrap框架基本使用下载地址:https://v3.bootcss.com/getting-started/ Bootstrap框架版本: 2.x 3.x 4.x // 推荐使 ...
【Bootstrap】＜前端框架＞Bootstrap布局容器栅格网格系统
目录一.Bootstrap概述: 二.Bootstrap HTML模板: 三.布局容器和栅格网格系统: 1.布局容器: 2.栅格网格系统: 2.1 媒体查询: 2.2 栅格参数: 2.3 列组合: ...
Python 前端框架【Bootstrap】
Bootstrap Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端开发框 ...
【JavaWeb】前端框架之Bootstrap
文章目录 1 概念 2 快速入门 3 响应式布局 4 CSS样式和JS插件 1 概念 BootStrap是前端开发框架,基于HTML.CSS.JavaScript. 优点: 定义了很多CSS样式和JS ...
前端框架之Bootstrap
框架概述: bootstrap是基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端开发框架,使得 Web 开发更加快捷.Bootstrap提供了优雅的HTML和CSS规范,它即是 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：让按钮看起来像个链接 (仍然保留按钮行为)...
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...

【前端框架之Bootstrap 02】布局与导航

【前端框架之Bootstrap 02】布局与导航相关推荐

最新文章

热门文章