【前端框架之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; }
10     
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基本可以完成功能了,但是这种导航不好看,还真不好看呢。所以我们看看其它的样式吧:

<ul class="nav nav-pills">


只是换了个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如需转载请自行联系原作者

相关文章
|
13天前
|
编解码 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的响应式设计与自适应布局
【4月更文挑战第30天】Flutter框架助力移动应用实现响应式设计与自适应布局,通过层次化布局系统和`Widget`树管理,结合`BoxConstraints`定义尺寸范围,实现自适应。利用`MediaQuery`获取设备信息,调整布局以适应不同屏幕。`FractionallySizedBox`按比例设定尺寸,`LayoutBuilder`动态计算布局。借助这些工具,开发者能创建跨屏幕尺寸、方向兼容的应用,提升用户体验。
【Flutter前端技术开发专栏】Flutter中的响应式设计与自适应布局
|
13天前
|
开发框架 前端开发 数据安全/隐私保护
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
【4月更文挑战第30天】本文探讨了Flutter的布局和样式设计,关键点包括:1) 布局基础如Column、Row和Stack用于创建复杂结构;2) Container、Center和Expanded等常用组件的作用;3) Theme和Decoration实现全局样式和组件装饰;4) 实战应用如登录界面和列表页面的构建;5) 响应式布局利用MediaQuery和弹性组件适应不同屏幕;6) 性能优化,避免过度复杂设计。了解并掌握这些,有助于开发者创建高效美观的Flutter应用。
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
|
6天前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
27 0
|
7天前
|
缓存 前端开发 JavaScript
微前端框架开发实践的体验报告
微前端架构作为一种解决方案,通过将应用拆分成更小、更易于管理的子应用来提高开发效率和应用性能。本文将分享我在开发微前端框架过程中遇到的问题、解决思路以及具体方案。通过本次微前端框架的开发实践,我们成功实现了应用的解耦和性能的提升。关键点包括跨域问题的解决、路由分发的实现、沙箱和样式隔离的技术应用、通信机制的构建以及性能优化策略的采用。我们的成果是建立了一个高效、可扩展、易于维护的微前端架构。同时,我们也认识到了微前端架构的复杂性,以及在实施过程中需要考虑的诸多细节问题。
48 0
|
7天前
|
前端开发 容器
前端 CSS 经典:grid 栅格布局(下)
前端 CSS 经典:grid 栅格布局(下)
18 0
|
7天前
|
前端开发 容器
前端 CSS 经典:grid 栅格布局(上)
前端 CSS 经典:grid 栅格布局(上)
16 0
|
10天前
|
前端开发 容器
前端 css 经典:grid 栅格布局
前端 css 经典:grid 栅格布局
16 1
|
12天前
|
Web App开发 开发框架 前端开发
Open UI5 前端开发框架配套的 Mock Server 工作原理解析
Open UI5 前端开发框架配套的 Mock Server 工作原理解析
24 0
|
13天前
|
编解码 前端开发 UED
前端布局方式及其优缺点
前端布局方式及其优缺点
21 1
|
13天前
|
开发框架 前端开发 JavaScript
我们是否对现代前端开发框架过于崇拜了?
在当前环境下,前端的开发由于框架的限制,导致代码变差。我们应该如何破除代码差的困境,如何正确使用前端架构,提升自己的代码质量。

热门文章

最新文章