前言
距离上次有几天时间了,其实我这段时间也多多少少在看这块,但是效果不好啊!
我就在那里捣鼓捣鼓,搞了半天还是一头雾水,可能是老夫真的老了吧,学习新东西还是不行了!
所以老夫这里就要开始无耻了,我准备一点一点的研究之,有时候抄袭官网大家就多包涵了哦。
我最近也使用了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提供了一些很不错的东西,能不能用好就是我们自己的事情啦。中文了大家午安。
分享到:
相关推荐
我最近也使用了bootstrap来布局,来搞导航。但是效果很不理想,所以我这里先来系统的看看这两块,若是仍然一头雾水的话,那么。。。。我就再学习就完了。好了,废话结束,我们进入今天的学习吧。说道栅格系统,我们...
bootstrap前端框架教程.zip 1.引入Bootstrap CDN 2.最简单的Bootstrap例子 3.可视化拖曳布局,生成HTML代码 4.Container类 5.Bootstrap的网格系统 6.控件 7.插件 8.UI编辑器 9.Bootstrap HTML编码规范 10.CSS编码...
利用CSS样式和栅格系统进行布局,并且利用Bootstrap框架中的CSS组件和JavaScript插件丰富页面,增加页面的美观和互动,本项目写的是一个房屋装修的网站,有四个网页
《前端开发框架bootstrap3教程》将介绍Bootstrap3的基本概念和使用方法,包括网格系统、表单、导航、按钮、图标等常用组件的使用。通过学习本教程,您将能够掌握Bootstrap3的核心技术,为您的Web开发工作提供便利和...
Bootstrap CSS/HTML前端框架,Bootstrap风格模板被很多前端设计者喜欢,Bootstrap前端框架模板是由Twitter的设计师Mark Otto和Jacob Thornton开发的一个CSS/HTML框架。框架中包括了众多HTML、CSS 和 JS 工具包,可...
这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您...
移动布局之rem适配布局、Bootstrap前端开发框架相关案例
Bootstrap是最受欢迎的HTML、CSS和JS的前端开发框架,用于开发响应式布局、移动设备优先的WEB项目,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式。
基于HTML,CSS,JAVASCRIPT的简洁灵活的流行前端框架及交互组件集。 适用于任何场景,适用于每一个人 需要理由来爱上Bootstrap么?那就请接着向下看。 由匠人建,为匠人用 和您一样,我们乐于创造出色的web...
•CSS框架:Bootstrap v3.3.4(稳定是后台,UI方面根据需求自己升级改造吧)。 •客户端验证:jQuery Validation Plugin 1.9.0。 •在线编辑器:ckeditor、simditor •上传文件:Uploadify v3.2.1 •动态页...
基于python flask框架构建的前后端分离,房屋租赁系统全栈项目,采用RESTful风格,使用bootstrap响应式布局,可用于本科毕业设计,课程设计作业等 使用flask框架RESTful风格快速搭建。 一个互联网租房项目,前端使用...
第2章 Bootstrap布局 1 Bootstrap的结构 1.1 使用栅格系统 1.1.1 绘制栅格 1.1.2 栅格系统的列偏移 操作案例1:制作音乐网站首页 1.1.3 栅格系统的列交换 1.1.4 栅格系统的嵌套 1.2 响应式栅格 操作案例2:组合栅格...
完全响应式布局(支持电脑、平板、手机等所有主流设备) 2 .基于最新版本的Bootstrap 3.3.4 3 .提供4套不同风格的皮肤 4 .使用最流行的的扁平化设计 5 .提供了诸多的UI组件 6 .集成多款国内优秀插件,诚意奉献 ...
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。 一个框架、多种...
rails_layout, 为各种前端框架生成 Rails 应用程序布局文件 RailsLayout gem使用这里 gem 可以设置你选择的前端框架的布局文件:Zurb基础 5.3Bootstrap 4.0Bootstrap 3.3它还将为 Bootstrap 或者基础设置设计视图。...
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您讲解 Bootstrap 框架的基础,通过学习这些内容,您将可以轻松...
1、H+是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题 2、她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了诸多的强大的可以重新组合的UI组件. 3、集成了最新的jQuery版本(v...
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您讲解 Bootstrap 框架的基础,通过学习这些内容,您将可以轻松...
H+是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了诸多的强大的可以重新组合的UI组件,并集成了最新的jQuery版本(v2.1.4),...