导航条

<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="data: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-width:1200px){
h3 {
margin-top:60px;
}
}
@media(max-width: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-width:1200px) {
.jumbotron h3 {
margin-top: 60px;
}
} @media(max-width: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="data: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="data: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="data:images/1.jpg" />
<div><h3>成功案例1111</h3></div>
</div>
<div class="col-lg-3 case-item col-md-4 col-sm-6">
<img src="data:images/2.jpg" />
</div>
<div class="col-lg-3 case-item col-md-4 col-sm-6">
<img src="data:images/3.jpg" />
</div>
<div class="col-lg-3 case-item col-md-4 col-sm-6">
<img src="data:images/4.jpg" />
</div>
<div class="col-lg-3 case-item col-md-4 col-sm-6">
<img src="data:images/5.jpg" />
</div>
<div class="col-lg-3 case-item col-md-4 col-sm-6">
<img src="data:images/6.jpg" />
</div>
<div class="col-lg-3 case-item col-md-4 col-sm-6">
<img src="data:images/7.jpg" />
</div>
<div class="col-lg-3 case-item col-md-4 col-sm-6">
<img src="data: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>

bootstrap练习制作网页的更多相关文章

  1. 利用Bootstrap框架制作查询页面的界面

    UI设计实战篇——利用Bootstrap框架制作查询页面的界面   Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...

  2. Cleaver快速制作网页PPT

    原文首发链接:http://www.jeffjade.com/2015/10/15/2015-10-16-cleaver-make-ppt/ 写在开始之前 互联网时代,以浏览器作为入口,已经有越来越多 ...

  3. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  4. 推荐几款制作网页滚动动画的 JavaScript 库

    这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...

  5. HTML第二部分表单及使用Photoshop快速制作网页

    一.表单 <form id="" name="" method="post/get" action="负责处理的服务端&qu ...

  6. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  7. bootstrap响应式网页设计的9条基本原则!

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

  8. [Mugeda HTML5技术教程之14]案例分析:制作网页游戏

    本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...

  9. 怎么使用dreamweaver制作网页教程 dw建站设计网页

    对于网页制作相关专业人士一定对dreamweaver有所认识,下面小编就问大家总结一下相关网页制作的一些步骤,喜欢的朋友可以一起来学习一下   Dreamweaver这一款专业的网页制作软件,相信相关 ...

随机推荐

  1. 20155234java实验一

    实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验要求 1.没有Linux基础的同学建议先学习Linux基础入门(新版))Vim ...

  2. 《图说VR入门》——googleVR 他山之玉

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/53125482 作者:car ...

  3. 分类问题中的“维数灾难” - robotMax

    分类问题中的“维数灾难” - robotMax 在看机器学习的论文时,经常会看到有作者提到“curse of dimensionality”,中文译为“维数灾难”,这到底是一个什么样的“灾难”?本文将 ...

  4. 【LOJ121】「离线可过」动态图连通性

    [LOJ121]「离线可过」动态图连通性 题面 LOJ 题解 线段树分治的经典应用 可以发现每个边出现的时间是一个区间 而我们每个询问是一个点 所以我们将所有边的区间打到一颗线段树上面去 询问每个叶子 ...

  5. Java 中的正则(Pattern)

    /**String 中 replaceAll(),matches(),split() 等方法,都是调用Pattern中的方法.学习了,瞬间觉得Pattern强大了 public String repl ...

  6. L013-linux基础正则表达式手把手实战讲解小节

    L013-linux基础正则表达式手把手实战讲解小节 这么一看又有10天没更新博客了,最近也一直在学就是时间比较闲散,再加上做上次老师留的十多道题,所以时间比较紧张,本来做完题准备直接先看L014讲解 ...

  7. Maven学习(八)-----Maven依赖机制

    Maven依赖机制 在 Maven 依赖机制的帮助下自动下载所有必需的依赖库,并保持版本升级. 案例分析 让我们看一个案例研究,以了解它是如何工作的.假设你想使用 Log4j 作为项目的日志.这里你要 ...

  8. cinder创建volume的流程-简单梳理

    1. cinder-api接收到创建的请求,入口:cinder.api.v2.volumes.VolumeController#create,该方法主要负责一些参数的重新封装和校验,然后调用cinde ...

  9. mongodb4简明笔记

    就一数据库,掌握基本用法,其他的现学现卖就行了. 所以要把握基本套路. 创建数据库=>使用数据库=>创建集合=>使用集合=>创建文档=>使用文档 1.数据库 mongod ...

  10. leetcode13_C++罗马数字转整数

    罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并 ...