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

嵌套列

嵌套的场地总是无处不在,大家来在率先个列里面嵌套一番吧,嵌套也是索要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>

Bootstrap 1

本身如此一嵌套,结果嵌套里面多个又不按套路出牌了。。。那是怎么回事呢???哎,作者也不明了,于是来搜寻下啊。

他以此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>

布局临时写到这里,大家接下去看看导航。

分隔符

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

内需分隔符的地方加二个以此东西就能够了:

Bootstrap 2

栅格系统

合计栅格系统,大家还是先解释一下他吧,尽管大家都了然:

栅格系统英文为“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>

Bootstrap 3

自我学聪明了,小编事先就抄了下代码、看了下效果然后就完了,作者今日精通了!!!笔者相对不会去看那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不应当用于布局的说法,小编骨子里会非常的小抱怨一番的,可是照旧先接受之,起分别心倒霉。

安份守己他那种做法,每起一行就须要3个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>

Bootstrap 4

我们供给确定保障每一行里面包车型大巴“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的幅度会成为百分之百,所以大家就毫无去惹他了。。

Bootstrap 5

导航条

导航条是大家实际供给的,一般都会有个颜色很不错的导航条,大家来看望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>

Bootstrap 6

这一个导航条依然挺雅观的,就是感觉他有个别惨淡。。。。

结语

先天简短的看了下导航和布局,其实两块地点也许有成都百货上千东西的,比如未来的导航其实依旧有许多事物要和谐做的。

bootstrap提供了有的很正确的事物,能或不能用好就是我们和好的业务啊。中文了我们午安。

前言

距离上次有几天时间了,其实本人那段日子也多多少少在看那块,可是意义不佳呀!

自小编就在那里捣鼓捣鼓,搞了半天依然二头雾水,或许是老夫真的老了啊,学习新东西依旧10分了!

由此老夫那里就要起来无耻了,我准备一点一点的切磋之,有时候抄袭官网我们就多担待了哦。

自家多年来也选取了bootstrap来布局,来搞导航。然而效果很不可能,所以作者那边先来系统的探访这两块,若是照旧叁头雾水的话,那么。。。。小编就再上学就完了。

好了,废话甘休,我们进来今日的读书啊。

偏移列

bootstrap定义了不少类,他的类搞得很全面了,比如大家要把列向右移动的话就足以使用.offset*。

.offset4 能够将span向右移动伍个列的宽度,于是我们来试试看:

Bootstrap 7

品牌

<aclass=”brand”href=”#”>Project name</a>那块地点显得的是品牌名称

PS:他的CSS中用了汪洋的float: left,笔者怎么感觉微微难过呢!

导航

首先,我们来看望最中央的导航样式:

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>

Bootstrap 8

于是一个导航就出来啊,咱们看他瞧着还不易啊!于是我们看下他的代码,作者这里看多少个关键点正是:

.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">

Bootstrap 9

只是换了个class就改成了俺们的领航,真的不错啊,这一个导航还是挺难堪的。

加一个nav-stacked后又能够水平排列了,这么些样式用于手提式有线话机是很正确的

Bootstrap 10

相关文章