bootstrap实现的自适应页面简单应用示例
本文实例讲述了bootstrap实现的自适应页面简单应用。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css'>
<style>
.tNav{
margin-top: 10px;
border-bottom-style: none;
}
.bNav{
text-align: center;
height: 50px;
line-height: 50px;
font-size: 20px;
}
#btnNavList{
font-size: 20px;
position: absolute;
top: 15px;
right: 20px;
}
#btnNavList:hover{
cursor: pointer;
}
.bNav:hover{
background: #EED2EE;
cursor: pointer;
}
#btnNavList,
#normalTNav,
#btnNavList-nav,
#btnMess-nav,
#btnMore-nav{
display: none;
}
#btnNavList-nav,
#btnMess-nav,
#btnMore-nav{
text-align: center;
background: #FFF0F5;
position: fixed;
right: 0;
width: 100%;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
#btnNavList-nav{
top: 50px;
}
#btnMess-nav,
#btnMore-nav{
bottom: 50px;
}
#btnNavList-nav a,
#btnMess-nav a,
#btnMore-nav a{
display: block;
text-decoration: none;
height: 50px;
line-height: 50px;
}
#btnNavList-nav a{
border-bottom: 1px solid #EED2EE;
}
#btnMess-nav a,
#btnMore-nav a{
border-top: 1px solid #EED2EE;
}
#btnNavList-nav a:hover,
#btnMess-nav a:hover,
#btnMore-nav a:hover{
background: #EED2EE;
cursor: pointer;
}
.content{
margin: 70px 0;
}
</style>
</head>
<body>
<nav class='navbar navbar-default navbar-fixed-top'>
<div class='container-fluid'>
<div class='navbar-header tNavLogo'>
<span class='glyphicon glyphicon-th-list' aria-hidden='true' id='btnNavList'></span>
<a class='navbar-brand' href='#'>Logo</a>
</div>
<ul class='nav nav-tabs tNav' id='normalTNav'>
<li role='presentation'><a href='#'>基础信息</a></li>
<li role='presentation'><a href='#'>基地订单</a></li>
<li role='presentation'><a href='#'>总部订单</a></li>
<li role='presentation'><a href='#'>发货结算</a></li>
<li role='presentation'><a href='#'>生产物流</a></li>
<li role='presentation'><a href='#'>库存查询</a></li>
</ul>
</div>
</nav>
<div class='content'></div>
<nav class='navbar navbar-default navbar-fixed-bottom'>
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-3 bNav' id='btnHome'>
<span class='glyphicon glyphicon-home' aria-hidden='true'></span>
</div>
<div class='col-xs-3 bNav' id='btnUser'>
<span class='glyphicon glyphicon-user' aria-hidden='true'></span>
</div>
<div class='col-xs-3 bNav' id='btnMess'>
<span class='glyphicon glyphicon-comment' aria-hidden='true'></span>
</div>
<div class='col-xs-3 bNav' id='btnMore'>
<span class='glyphicon glyphicon-option-horizontal' aria-hidden='true'></span>
</div>
</div>
</div>
</nav>
<div id='btnNavList-nav'>
<div><a href='#'>基础信息</a></div>
<div><a href='#'>基地订单</a></div>
<div><a href='#'>总部订单</a></div>
<div><a href='#'>发货结算</a></div>
<div><a href='#'>生产物流</a></div>
<div><a href='#'>库存查询</a></div>
</div>
<div id='btnMess-nav'>
<div><a href='#'>我的消息1</a></div>
<div><a href='#'>我的消息2</a></div>
<div><a href='#'>我的消息3</a></div>
</div>
<div id='btnMore-nav'>
<div><a href='#'>当前版本</a></div>
<div><a href='#'>意见反馈</a></div>
<div><a href='#'>联系方式</a></div>
<div><a href='#'>关于</a></div>
</div>
<script src='http://cdn.bootcss.com/zepto/1.1.4/zepto.min.js'></script>
<script>
(function(){
function SHOW(obj){
obj.css('display','block');
}
function HIDE(obj){
obj.css('display','none');
}
function TOGGLE(e){
var obj = $(e);
if(obj.css('display') === 'none'){
obj.css('display', 'block');
}
else if(obj.css('display') === 'block'){
obj.css('display', 'none');
}
}
function tNavControl(){
var w = window.document.body.offsetWidth;
var objBtn = $('#btnNavList');
var objNor = $('#normalTNav');
var objUnNor = $('#btnNavList-nav');
if(w <= 768){//小屏幕
SHOW(objBtn);
//SHOW(objUnNor);
HIDE(objNor)
}
else{
HIDE(objBtn);
HIDE(objUnNor);
SHOW(objNor);
}
}
$('#btnNavList').on('click', function(){
HIDE($('#btnMess-nav'));
HIDE($('#btnMore-nav'));
TOGGLE('#btnNavList-nav');
return false;
})
$('#btnMess').on('click', function(){
HIDE($('#btnNavList-nav'));
HIDE($('#btnMore-nav'));
TOGGLE('#btnMess-nav');
return false;
})
$('#btnMore').on('click', function(){
HIDE($('#btnNavList-nav'));
HIDE($('#btnMess-nav'));
TOGGLE('#btnMore-nav');
return false;
})
$('body').on('click', function(){
HIDE($('#btnNavList-nav'));
HIDE($('#btnMess-nav'));
HIDE($('#btnMore-nav'));
})
window.onload = function(){
tNavControl();
var str = '<div class="list-group">';
for(var i=0; i<=100; i++){
str +=
'<a class="list-group-item" href="#" rel="external nofollow" >'
+ '<span class="badge">' + i + '</span>'
+ '<h4 class="list-group-item-heading">' + '大标题' + i + '</h4><br/>'
+ '<p class="list-group-item-text">' + '备注' + i + '<br/>...' + '</p>'
+ '<span class="glyphicon glyphicon-hand-up" aria-hidden="true" style="float:right;"></span>'
+ '<br/>'
+ '</a>';
}
str += '</div>';
$('.content').html(str);
}
window.onresize = tNavControl;
})();
</script>
</body>
</html>
运行效果图：
PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：
在线bootstrap可视化布局编辑工具：
http://tools.jb51.net/aideddesign/layoutit
希望本文所述对大家基于bootstrap的程序设计有所帮助。
相关推荐
-
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
布局组件 下拉按钮 <div class="dropdown"> <button class="btn dropdown-toggle" id='drop1' data-toggle="dropdown"> 帮助<span class="caret"></span> </button> <ul class="dropdown-menu" ro
-
BootStrap table表格插件自适应固定表头(超好用)
首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b
-
Markdown与Bootstrap相结合实现图片自适应属性
先给大家说下Markdown的基本概念及优点 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. Markdown 是一种轻量级的标记语言,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被标记.语言所迷惑,Markdown 的语法十分简单.常用的标记符号也不超过十个,这种相对于更为复杂的 HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永
-
Bootstrap 布局组件（全）
Bootstrap 布局组件 1.Bootstrap字体图标 (1).字体图标列表链接 http://www.runoob.com/bootstrap/bootstrap-glyphicons.html (2).用法 如需使用图标,只需要简单地使用下面的代码即可.请在图标和文本之间保留适当的空间.没有glyphicon的css. <span class="glyphicon glyphicon-search"></span> (3).定制字体图标 我们已经看到如
-
使用jQuery和Bootstrap实现多层、自适应模态窗口
本篇实践一个多层模态窗口,而且是自适应的. 点击页面上的一个按钮,弹出第一层自适应模态窗口. 在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即第二层模态窗口打开的时候,无法关闭第一层模态窗口. 具体页面实现部分如下: 复制代码 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-
Bootstrap表单布局
Bootstrap 提供了下列类型的表单布局: •垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: •内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖排. •水平表单 -> 用栅格系统控制显示 一.垂直表单 垂直表单使用的标准步骤 1.<form> 元素添加 role="form". 2.把标签和控件放在一个带有"form-group"的<div> 中,获取最佳间距. 3.向所有的文
-
Bootstrap页面布局基础知识全面解析
Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的! 今天主要说下页面的布局,这是最基础的东西了,当我们设计一个站点时,应该为它设计一个全局性的统一的规范页面,这种页面我们叫它布局页,而在页面上体现出来的东西,就是布局的元素,在bootstrap里当然也是不可缺少的东西. Bootstrap的布局是一种栅格系统,即它由行和列组成,在使用时需要为页面内容和栅格系统包裹一个
-
BootStrap整体框架之基础布局组件
1 基础布局组件 在12栅格系统上基础上,BootStrap还提供了多种基础布局组件. CSS组件,总结为8大类型的样式: 基础样式.颜色样式.尺寸样式.状态样式.特殊元素样式.并列元素样式.嵌套子元素样式.动画样式 1.1基础样式 基本样式,一般包含文本字体,颜色背景,边框,定位等,如下面警告框: //源码 .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px
-
Markdown+Bootstrap图片自适应属性详解
Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不超过十个,这种相对于更为复杂的 HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果. 使用 Markdown 的优点 1.专注你的文字内容而不是排版样式,安心写作. 2.轻松的导出 HTML.PDF 和本身的 .md 文件.
-
bootstrap配合Masonry插件实现瀑布式布局
问题是这样的,使用bootstrap的栅格进行布局的时候,如果大小超过了,会自动的转到下一行,但是在显示图片的时候就会出现缝隙,下面介绍masonry进行缝隙的填补. 好,下面上货. 1.首先是html <html> <head> <title>Title</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/cs