我的第一个boostrap页面--新闻三级页面
我的第一个boostrap页面--新闻三级页面
最近在进行新闻模板改版，利用boostrap进行响应式布局，但是由于我们制作的是新闻页面，需要兼容最麻烦的IE7，是个很头疼的问题，今天下午终于解决掉他了。
问题一：之前没有学习过bootstrap，怎样启动第一个项目~
我感觉在接到新项目并需要运用到新插件时，需要快速熟知使用方法，此时并不适合细细看源码，不如先读懂代码的目录，在根据我们的项目需求，进行有针对性的复习。
核心掌握的东西：
- 基本的HTML模版
html 代码
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
- 掌握栅格系统：
栅格系统，有col-xs-，col-sm-，col-md-,col-lg-，四种不同前缀，在四种不同屏幕大小下会有不同的展现，一个标签上最多可以放四个，这样就可以达到布局模块跟随拖动屏幕大小改变的效果~。
- 核心说来bs分为几种模块：布局、ui（导航，字体，图标等）、js等等
问题二：关于版本选择
bs官网的线上可应用的成熟版本共有两个-- 分别是bs2，bs3。其中，bs2版本兼容PC端更好，但文件体积也更大；bs3版本更多用于手机端，文件轻量级，样式也更加美观。在这里，并不是说bs3就一定比bs2好，根据你的项目确定用哪个，如果是以手机端为主就用bs3，如果以在电脑上观看网页为主，则bs2版本再适合不过了。
问题三：手机端显示时，有必要显示所有模块吗？
我们有时pc端有百度广告，手机二维码等模块，在PC端时用，放到手机端就不用了，这时怎么办呢？我就加了一个判断屏幕大小的js文件，这个js可以添加新css在html里，这样在小屏时就多了一个新的样式表。
问题四：如何让各种广告融入bootstrap
静态页与实际的引用页还是有一定区别的，在应用页中，增加了一些百度广告或者flash广告，那对于百度广告的处理是在手机端不显示，flash则是在手机端显示img，img的则不变，所以好多时候很多产品经理或是高层领导，并不懂得技术，所以在他们提出不对的需求是，也要勇敢的say no
问题五：让bootstrap完美兼容IE7
放了俩bs官网兼容文件，这个文件要注意哦，一定要是同域，不能跨域，否则就不能兼容了，将兼容文件，bsjs文件 bscss文件 全部放在一个目录下，并且是同源的哦，否则兼容文件不兼容。
用户评论