bootstrap练习制作网页
导航条
<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练习制作网页的更多相关文章
- 利用Bootstrap框架制作查询页面的界面
UI设计实战篇——利用Bootstrap框架制作查询页面的界面 Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...
- Cleaver快速制作网页PPT
原文首发链接:http://www.jeffjade.com/2015/10/15/2015-10-16-cleaver-make-ppt/ 写在开始之前 互联网时代,以浏览器作为入口,已经有越来越多 ...
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 推荐几款制作网页滚动动画的 JavaScript 库
这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...
- HTML第二部分表单及使用Photoshop快速制作网页
一.表单 <form id="" name="" method="post/get" action="负责处理的服务端&qu ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- bootstrap响应式网页设计的9条基本原则！
bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...
- [Mugeda HTML5技术教程之14]案例分析：制作网页游戏
本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...
- 怎么使用dreamweaver制作网页教程 dw建站设计网页
对于网页制作相关专业人士一定对dreamweaver有所认识,下面小编就问大家总结一下相关网页制作的一些步骤,喜欢的朋友可以一起来学习一下 Dreamweaver这一款专业的网页制作软件,相信相关 ...
随机推荐
- 20155234java实验一
实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验要求 1.没有Linux基础的同学建议先学习Linux基础入门(新版))Vim ...
- 《图说VR入门》——googleVR 他山之玉
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/53125482 作者:car ...
- 分类问题中的“维数灾难” - robotMax
分类问题中的“维数灾难” - robotMax 在看机器学习的论文时,经常会看到有作者提到“curse of dimensionality”,中文译为“维数灾难”,这到底是一个什么样的“灾难”?本文将 ...
- 【LOJ121】「离线可过」动态图连通性
[LOJ121]「离线可过」动态图连通性 题面 LOJ 题解 线段树分治的经典应用 可以发现每个边出现的时间是一个区间 而我们每个询问是一个点 所以我们将所有边的区间打到一颗线段树上面去 询问每个叶子 ...
- Java 中的正则（Pattern）
/**String 中 replaceAll(),matches(),split() 等方法,都是调用Pattern中的方法.学习了,瞬间觉得Pattern强大了 public String repl ...
- L013-linux基础正则表达式手把手实战讲解小节
L013-linux基础正则表达式手把手实战讲解小节 这么一看又有10天没更新博客了,最近也一直在学就是时间比较闲散,再加上做上次老师留的十多道题,所以时间比较紧张,本来做完题准备直接先看L014讲解 ...
- Maven学习(八)-----Maven依赖机制
Maven依赖机制 在 Maven 依赖机制的帮助下自动下载所有必需的依赖库,并保持版本升级. 案例分析 让我们看一个案例研究,以了解它是如何工作的.假设你想使用 Log4j 作为项目的日志.这里你要 ...
- cinder创建volume的流程-简单梳理
1. cinder-api接收到创建的请求,入口:cinder.api.v2.volumes.VolumeController#create,该方法主要负责一些参数的重新封装和校验,然后调用cinde ...
- mongodb4简明笔记
就一数据库,掌握基本用法,其他的现学现卖就行了. 所以要把握基本套路. 创建数据库=>使用数据库=>创建集合=>使用集合=>创建文档=>使用文档 1.数据库 mongod ...
- 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 ,即为两个并 ...