导航条
<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
反色的导航条
<nav class="navbar navbar-inverse"> ... </nav>
四边不要圆角，改成直角，添加样式
.navbar {
border-radius:0;
}
在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。
我们不支持在输入框的单独一侧添加多个额外元素（.input-group-addon 或 .input-group-btn）。
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div>
<div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div><!-- /input-group -->
栅格：规定一行是12格，如果一行分成 10格，并且首格向右移动1格，可以如下
<div class="container"> <div class="row"> <div class="col-lg-5 col-lg-offset-1 col-md-5"> <h3>公司简介</h3> </div> <div class="col-lg-5 col-md-5 hidden-sm hidden-xs"> <img src="images/timg.jpg" class="img-circle img-responsive" /> </div> </div> </div>
img-responsive是图片响应式的意思，在Bootstrap框架中，有一个.img-responsive的CSS样式。应用这个样式以后，图片就会变成响应式图片。
hidden-sm hidden-xs 是网页宽带小到992px 和768px时隐藏此栅格，此时只剩下'<h3>公司简介',<h3>的上边高度怎么控制呢？答案如下：
@media(max-1200px){
h3 {
margin-top:60px;
}
}
@media(max-992px){
h3{
margin-top:10px;
}
}
背景塌陷问题：在div 中一栅格中有背景图，当网页缩小时，此行就成一格显示，此时背景图比文字塌陷下去，解决方法：在div中添加样式即可：overflow:hidden;
练习后的代码如下：：：：：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="gbk"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style> .navbar { margin-bottom: 0; min-height: 50px; border-radius: 0; } .navbar-brand { padding: 0 15px; } form .btn { border-color: #000; color: red; } body .jumbotron { background: url(images/bg.jpg) center center repeat-x; padding: 10px 0 0 0; } .jumbotron h3 { color: #ffd800; font-size: 20px; margin-top: 90px; line-height: 1; } .jumbotron p { font-size: 16px; color: #e3e3e3; line-height: 28px; margin-top: 20px; } .con-title { color: #4cff00; } .con-detail { line-height: 28px; } .list-item { padding-left: 118px; height: 118px; background: url(images/item.png) no-repeat left center; background-size: 110px 110px; margin-bottom: 30px; overflow: hidden; //解决背景塌陷; } .list-item h3 { color: #4cff00; } .list-item p { line-height: 28px; } @media(max-1200px) { .jumbotron h3 { margin-top: 60px; } } @media(max-992px) { .jumbotron h3 { margin-top: 10px; } } .case-item { padding: 0; position:relative; } .case-item img { width: 100%; height: 100%; } .case-item div { width: 100%; height: 100%; background:#00ff90; position:absolute; left:0; top:0; display:none; } .case-item:hover div { display:block; } </style> </head> <body> <nav class="navbar navbar-inverse"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <img src="images/logo.jpg" width="100" height="50" /> </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li> <li><a href="#">源码</a></li> <li><a href="#">生产</a></li> <li><a href="#">Sass</a></li> <li><a href="#">安装</a></li> <li><a href="#">下载</a></li> </ul> <form class="navbar-form navbar-right"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div><!-- /input-group --> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="jumbotron"> <div class="container"> <div class="row"> <div class="col-lg-5 col-lg-offset-1 col-md-5"> <h3>公司简介</h3> <p>如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。</p> </div> <div class="col-lg-5 col-md-5 hidden-sm hidden-xs"> <img src="images/timg.jpg" class="img-circle img-responsive" /> </div> </div> </div> </div> <div class="container-fuild"> <div class="container"> <div class="row"> <h3 class="con-title text-center">解决方案</h3> <div class="con-detail text-center col-lg-8 col-lg-offset-2">1000万图标下载png免费下载电商素材,平面素材,APP素材,PNG素材,为2000万设计师服务专注图标下载png帮助2000万设计师提升10倍工作效率,快速设计出精品作品升职加薪奥!</div> </div> <div class="row" style="margin-top:60px;"> <div class="col-lg-4 list-item col-md-6 col-sm-6"> <h3>网络集成</h3> <p>昵图网所有作品均是用户自行上传分享并拥有版权或使用权</p> </div> <div class="col-lg-4 list-item col-md-6 col-sm-6"> <h3>网络集成</h3> <p>昵图网所有作品均是用户自行上传分享并拥有版权或使用权</p> </div> <div class="col-lg-4 list-item col-md-6 col-sm-6"> <h3>网络集成</h3> <p>昵图网所有作品均是用户自行上传分享并拥有版权或使用权</p> </div> <div class="col-lg-4 list-item col-md-6 col-sm-6"> <h3>网络集成</h3> <p>昵图网所有作品均是用户自行上传分享并拥有版权或使用权</p> </div> <div class="col-lg-4 list-item col-md-6 col-sm-6"> <h3>网络集成</h3> <p>昵图网所有作品均是用户自行上传分享并拥有版权或使用权</p> </div> <div class="col-lg-4 list-item col-md-6 col-sm-6"> <h3>网络集成</h3> <p>昵图网所有作品均是用户自行上传分享并拥有版权或使用权</p> </div> </div> </div> </div> <div class="container"> <div class="row" style="margin:0 15px;"> <div class="col-lg-3 case-item col-md-4 col-sm-6"> <img src="images/1.jpg" /> <div><h3>成功案例1111</h3></div> </div> <div class="col-lg-3 case-item col-md-4 col-sm-6"> <img src="images/2.jpg" /> </div> <div class="col-lg-3 case-item col-md-4 col-sm-6"> <img src="images/3.jpg" /> </div> <div class="col-lg-3 case-item col-md-4 col-sm-6"> <img src="images/4.jpg" /> </div> <div class="col-lg-3 case-item col-md-4 col-sm-6"> <img src="images/5.jpg" /> </div> <div class="col-lg-3 case-item col-md-4 col-sm-6"> <img src="images/6.jpg" /> </div> <div class="col-lg-3 case-item col-md-4 col-sm-6"> <img src="images/7.jpg" /> </div> <div class="col-lg-3 case-item col-md-4 col-sm-6"> <img src="images/8.jpg" /> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
测试时把页面进行缩放再查看发生了什么变化 。
胶囊导航，nav-stacked是垂直展示
<ul class="nav nav-pills nav-stacked" > <li><a href="">添加用户</a></li> <li><a href="">删除用户</a></li> <li><a href="">管理用户</a></li> </ul>
收缩式， data-parent="#accordion"是每次只能打开一个，每面板独自打开互不影响可以删除此句，class="panel-collapse collapse in"中in是初次显示是打开状态，无in是关闭状态
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 用户管理 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="">添加用户</a></li> <li><a href="">删除用户</a></li> <li><a href="">管理用户</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 产品管理 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <ul class="nav nav-pills nav-stacked" > <li><a href="">产品列表</a></li> <li><a href="">添加产品</a></li> <li><a href="">删除产品</a></li> </ul> </div> </div> </div> </div>