html界面js自动适应页面,bootstrap实现的自适应页面简单应用示例

本文实例讲述了bootstrap实现的自适应页面简单应用。分享给大家供大家参考，具体如下：

.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;

}

Logo

• 基础信息
• 基地订单
• 总部订单
• 发货结算
• 生产物流
• 库存查询

基础信息

基地订单

总部订单

发货结算

生产物流

库存查询

我的消息1

我的消息2

我的消息3

当前版本

意见反馈

联系方式

关于

(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 = '

';

for(var i=0; i<=100; i++){

str +=

''

+ '' + i + ''

+ '

' + '大标题' + i + '

'

+ '

' + '备注' + i + '
...' + '

'

+ ''

+ '
'

+ '';

}

str += '

';

$('.content').html(str);

}

window.onresize = tNavControl;

})();

运行效果图：

PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：

希望本文所述对大家基于bootstrap的程序设计有所帮助。