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这一款专业的网页制作软件,相信相关 ...
随机推荐
- 20155226 2016-2017-2 《Java程序设计》课程总结
20155226 2016-2017-2<Java程序设计>课程总结 每周作业链接汇总 预备作业1:师生关系 预备作业2:优秀技能经验 预备作业3:虚拟机linux初接触 第一周学习总结: ...
- 20155234java实验一
实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验要求 1.没有Linux基础的同学建议先学习Linux基础入门(新版))Vim ...
- 20155315 2016-2017-2 实验二《Java面向对象程序设计》实验报告
实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4.熟悉S.O.L.I.D原则 5.了解设计模式 实验知识点 1.参考Intellj I ...
- dsu on tree总结
dsu on tree 树上启发式合并.我并不知道为什么要叫做这个名字... 干什么的 可以在\(O(n\log n)\)的时间内完成对子树信息的询问,可横向对比把树按\(dfs\)序转成序列问题的\ ...
- Why HBase
3.1.1,为什么选用HBases a) 容量巨大 HBase 的单表可以有百亿行.百万列,数据矩阵横向和纵向两个维度所支持的数据量级 都非常具有弹性.传统的关系型数据库,如 Oracle ...
- python基础——字符串
Python的核心数据类型--字符串 常见字符串常量和表达式 操作 解释 s = '' 空字符串 s = "dodo's" 双引号和单引号 s = 'd\no\p\td\x00o' ...
- mac php版本切换
mac os 中自带php版本,但是很多扩展是不带的. 这个网站: http://php-osx.liip.ch/提供了几乎所有的php版本 通过输入 curl -s http://php-osx.l ...
- git远程版本回滚方法【转】
step1:本地代码回滚到上一版本(或者指定版本) git reset --hard HEAD~1 step2:加入-f参数,强制提交,远程端将强制跟新到reset版本 git push -f ori ...
- Jupyter 安装并配置工作路径[转]
1.通过python的pip方式安装jupyterpython和pip都安装好后,通过cmd进入命令提示窗口,找到python安装目录下的Script目录,例如我的是路径是:C:\Program Fi ...
- python数据可视化——matplotlib 用户手册入门：pyplot 画图
参考matplotlib官方指南: https://matplotlib.org/tutorials/introductory/pyplot.html#sphx-glr-tutorials-intro ...