Bootstrap构建一个个人网站

导航

1.自适应导航的实现

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

<li class="active"><a href="##">Home</a></li>

<li><a href="##">CSS3</a></li>

<li><a href="##">Sass</a></li>

<li><a href="##">jQuery</a></li>

<li><a href="##">Responsive</a></li>

</ul>

实现效果

Home

CSS3

Sass

jQuery

Responsive

2.下拉按钮的语法为

< class="dropdown">

可以镶嵌实现

实现效果

首页

教程

CSS3

Sass

jQuery

Responsive

关于我们

3.面包屑

同理面包屑,可以告知用户所处的具体位置

< class="breadcrumb">

首页

我的书

《图解CSS3》

4.导航条

可以理解为装导航的容器？

<div class="navbar navbar-default" role="navigation">

　<div class="navbar-header">

　    <a href="##" class="navbar-brand">慕课网</a>

　</div>

<ul class="nav navbar-nav">

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

<li class="dropdown">

<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="##">CSS3</a></li>

<li><a href="##">JavaScript</a></li>

<li class="disabled"><a href="##">PHP</a></li>

</ul>

</li>

<li><a href="##">名师介绍</a></li>

<li><a href="##">成功案例</a></li>

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

</ul>

<form action="##" class="navbar-form navbar-left" rol="search">

<div class="form-group">

<input type="text" class="form-control" placeholder="请输入关键词" />

</div>

<button type="submit" class="btn btn-default">搜索</button>

</form>

</div>

5.响应式导航栏

将navbar分成两部分，小屏幕时需要显示的写在

.navbar-responsive-collapse底下，需要隐藏的写在navbar-responsive-collapse的div底下

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">

<span class="sr-only">Toggle Navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<div class="collapse navbar-collapse navbar-responsive-collapse">

</div>

缩略图

<div class="container">

<div class="row">

<div class="col-xs-6 col-md-3">

<a href="#" class="thumbnail">

<img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" >

</a>

</div>

将需要展示的缩略图放在网格中，分布好，引入thumbnail属性，再style中也可限定图片的大小。