导航条
<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这一款专业的网页制作软件,相信相关 ...
随机推荐
-
Sharepoint学习笔记—其它—如何知道某个Sharepoint环境的安装类型
我们在安装sharepoint 2010时会出现三种安装类型: Standalone, Server Farm Standalone与Server Farm Complete. Standalone ...
-
【USACO 2.4 】Bessie Come Home
题意:给出n条有权的双向边(10000),求到达Z最近的大写字母,及其距离. 题解:即求Z出发的最短路,用dijstra就可以了,注意边要开到20000以上. /* TASK: comehome LA ...
-
Codeforces Round #373 (Div. 2)A B
Codeforces Round #373 (Div. 2) A. Vitya in the Countryside 这回做的好差啊,a想不到被hack的数据,b又没有想到正确的思维 = = [题目链 ...
-
float([x])： 将一个字符串或数转换为浮点数。如果无参数将返回0.0
float([x]): 将一个字符串或数转换为浮点数.如果无参数将返回0.0 >>> float(12) 12.0 >>> float(-122) -122.0 & ...
-
C/C++中new关键字是否加括号的区别
代码: #include <iostream> using namespace std; class A{ public: int a; }; int main(){ A *a1 = ne ...
-
J2SE知识点摘记-数据库(二)
一. 查询数据 注意sql的内容. 通过ResultSet接口保存全部的查询结果,通过Statement接口中的executeQuery()方法查询.查询之后需要分别取出.通过nex ...
-
mysql uodate select子查询
UPDATE user SET pwd='123' WHERE id in ( SELECT id from user WHERE username = 'zx' ); 报错[Err] 1093 ...
-
ecshop根据订单号查询物流信息
目标:订单详情页可以根据订单查询当前物流信息. 效果图: 思路:点击后异步请求快递查询api,接受返回信息,拼接. 代码: admin下:order_info.htm //一:顶部插入jquery,在 ...
-
等价路由在路由器和CE交换机上默认的行为是不同的，路由器总是走第一个下一跳，CE交换机是逐包。
结论: 1.在eNSP中实验,路由器和CE交换机对于等价路由的默认转发行为是不同的, 路由器:默认是基于流的转发形态,更准确的来讲,ping两个不同的下一跳,都是走等价路由的第一个路由,不走第二条路由 ...
-
常见的游戏AI技术对比(FSM,HFSM,BT,GOAP,HTN,Utilitay,机器学习)
最近研究的内容,比较懒还没写文章,先占个坑,过几天补