bootstrap实现导航⾃适应对于不同的设备
先说⼀件⼩事（嘿嘿，也是吐槽⼀件事），曾经的曾经⾯试过⼀家公司，这家公司说是想⽤bootsrap做⽹站，主要是适配从移动端到PC 端。当时我所在的公司PC端所做的⽹站就是⽤bootstrap做的，但是呢当时公司要求只是适配1024px以上便可。因为当时公司移动端有专门⼈员负责相关的内容，没必要在⽹站这块投⼊⼈⼒物⼒财⼒在为PC端的页⾯增强适配性。
但是呢当时⾯试官拿着⼿机访问时适配性不好，然后就死劲说适应性不⾏。当时我也是使劲浑⾝解数解释。毕竟不管结果如何，都要为⾃⼰的时间负责。
不同的⾏业融⼊互联⽹，不可能相同，但是知识的本质是不变的。..总之，找⼯作容易，找⼀份合⼼的⼯作不易~~~哈哈，且⾏且珍惜~~~接下来是为我的⼿艺加砖添⽡部分哦~~~~~~ ...............................................................以下是正⽂.........................................................
先看图
屏幕分辨 >768px或是768px
屏幕分辨率<768
这是同⼀个页⾯同⼀套代码只是在不同的分辨下表现不同。且看下⾯代码
⼆、代码
编写⼀个线上页⾯，从⽆到有，从框架到内容细节的完善，到最后上线优化维护，其实就像建⼀座⼤厦⼀样。只是完成周期不同罢了。当然这也说明在编写页⾯时的⼀种思路，先html布局框架，然后css做相应的装修，然后进⾏细节完善。
html
<!--header-->
<div class="nav_content">
<div class="container" role="navigation" id="header_wrap">
<!--logo and ⼩于768px时可见部分-->
<div class="navbar-logo">
<button type="button" class="navbar-toggle collapd" data-toggle="collap" data-target="#bs-example-navbar-collap-1" aria-expanded="fal"> <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="../mages/llooggoo.png" alt="logo"></a>
</div>
<!--⼤于768px时可见部分 .navbar-collap是主要的控制类-->
<div class="collap navbar-collap nav_wrap" id="bs-example-navbar-collap-1">宋庆龄基金会
炒海带结<ul class="nav navbar-nav nav_style" id="nav">
<li class="active"><a href="#">⾸页 <span class="sr-only">(current)</span></a></li>
<li><a href="#">上门试车</a></li>电脑声卡驱动
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="fal">众筹试车<span class="caret"></span></a>
<ul class="dropdown-menu">
<li role="parator" class="divider divider_visiblity"></li>
<li><a href="#">One more parated link</a></li>
<li role="parator" class="divider"></li>
<li><a href="#">Action</a></li>
<li role="parator" class="divider"></li>
<li><a href="#">Another action</a></li>
<li role="parator" class="divider"></li>
<li><a href="#">Something el here</a></li>
<li role="parator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="parator" class="divider"></li>
<li><a href="#">One more parated link</a></li>
</ul>
</li>
<li><a href="#">车展2015</a></li>
<li><a href="#">极客</a></li>
<li><a href="#">问答</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</div>
</div>
<!--header end-->
css
<style>
/*重写浏览器默认样式*/
body {
font-size: 1.6rem;
line-height:1.6;
font-family:"Microsoft YaHei" arial,courier new,courier,"宋体",monospace; }
*{ margin:0; padding:0; border:none; list-style:none;}
input,textarea,a{ outline:none;}
/*⾃定义全局样式*/
.img_wrap img {width:100%; display:block;}
a:hover, a:focus{ text-decoration:none; border:none; }
a{ text-decoration:none; }
a,button,input{outline:none;}
/*bootstrap框架样式重写*/
.clear_padding{
笑着说再见padding-left:0;
padding-right:0;
}
初一下册期末试卷
.clear_padding_l{padding-left:0 !important;}
.clear_padding_r{padding-right:0 !important;}
/*navigation*/
.nav_content{
border-top:2px solid #f90;
background: #fff;
box-shadow: 0 1px 2px #ccc;
position:relative;
}
.nav_wrap{padding-top: 15px; position:relative;}
.
nav_style li a{ width:100%; text-align:center; color: #333;}
.nav_style .active > a{ color:#f90;}
/*width>768px*/
@media (min-width: 768px){
.nav_wrap{width:70%; float:right;}
.nav_style{ width:100%;}
.nav_style li{width:14.28%;}
.navbar-logo{width:20%;}
.divider_visiblity{ display:none;}
}
@media (min-width: 1170px){
.
nav_wrap{width:80%; float:right;}
}
鳙鱼头
/*重写bootstrap的css库中的nav*/
.nav > li > a:focus, .nav > li > a:hover {
background:none !important;
text-decoration: none;取回权
color:#f90;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover{
background:none !important;
text-decoration: none;
color:#f90;
ipad截屏方法
}
.dropdown-menu li{ width:100%; text-align:left;}
.dropdown-menu li a{ text-align:left;}
/*width<768px*/
@media (max-width: 768px){
.nav_content{ height:78px;}
#header_wrap{ position:absolute; z-index:10; width: 100%;}
.navbar-brand>img{ width:80%;}
.nav_style > li{ border-bottom:1px solid #ccc;}
.nav_style li a{ text-align:left;}
.
dropdown-menu .divider{ margin:0;}
}
/*重写bootstrap⼩于768px时点击导航*/
.navbar-toggle{
border:1px solid #ccc;
margin-top: 20px;
}
.navbar-toggle .icon-bar{
background:#ccc;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{ background:none;
color:#f90;
}
</style>
js
<script>
$('#nav a').click(function(){
var $a_li = $(this).parent('li');
$a_li.addClass('active').siblings('li').removeClass('active');
});
</script>
PS：别忘了引⼊bootstrap的css库、js库，以及jQuery库
