Bootstrap构建一个个人网站

来源：互联网发布：龙卷风收音机软件编辑：程序博客网时间：2024/05/22 02:30

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中也可限定图片的大小。

0 0