先说一件小事（嘿嘿，也是吐槽一件事），曾经的曾经面试过一家公司，这家公司说是想用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 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="../mages/llooggoo.png" alt="logo"></a>
</div>
<!--大于768px时可见部分 .navbar-collapse是主要的控制类-->
<div class="collapse navbar-collapse nav_wrap" id="bs-example-navbar-collapse-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="false">众筹试车<span class="caret"></span></a>
<ul class="dropdown-menu">
<li role="separator" class="divider divider_visiblity"></li>
<li><a href="#">One more separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Action</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Another action</a></li>
<li role="separator" class="divider"></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>
<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;
}
.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库