【心得总结】Bootstrap模板及一点心得总结

使用Boot栅格布局体系，里面的内容自己定义

boot2主要针对pc端，对PCIE6-8兼容较好，但是Boot2每个栅格之间有很大的间隙，没法去除可能还没研究透

Boot3， 我主要研究了Boot3，boot3对不同宽度屏幕使用了不用的栅格类.col-lg-大屏   .col-md-中等屏  .col-sm-PAD屏幕  .col-xs-手机屏幕

但是我新发现一个问题，就是在IE8以下就算你引入了responsive.js仍然栅格体系调用的是手机最小屏幕的

解决方法以下几种方式

1、单独给IE8及以下写一种CSS引入

<!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!–[if lt IE 9]>
  <script src=”http://static.utan.com/theme/default/utan/js/common/html5.js”></script>
  <script src=”js/respond.min.js”></script>
  <link rel=”stylesheet” type=”text/css” href=”css/styleIE8.css” />
<![endif]–>

其实主要几点就是：

写个给定的宽度，如中度屏幕的宽度屏幕或者1000，

其二就是在小屏幕下的栅格体系不一样的话用固定布局调整

2、使用Boot2

总结：

我觉得PC和手机用一套好像不是很靠谱，首先PC端的图片很大很多等。。。不适用于手机端。用一套。。

解决方法是手机PC布局可以大致一样，但是单独引入一个CSS以及单独引入一个html做调整此html只写col-xs-一种

以下是模板，我的建议是栅格体系的paddingmargin值重置为0，自己在栅格体系里面加一个div来控制Marginpadding值
<!DOCTYPE html>
<html lang=”zh-CN”>

<head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>

    <title>bootgulp</title>

    <meta name=”description” content=”Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript（或者 CoffeeScript ）源码来实现的。”>
    <meta name=”keywords” content=”Gulp.js,Gulp,Node.js,Node,JavaScript,CoffeeScript,Grunt,Gruntjs,Stream，流,自动化,Make”>
    <meta name=”author” content=”gulp.js 中文网”>
    <link rel=”icon” href=”favicon.ico”>

    <!– Bootstrap core CSS –>
    <link rel=”stylesheet” href=”http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css”>
    <link rel=”stylesheet” href=”http://cdn.bootcss.com/highlight.js/8.4/styles/monokai_sublime.min.css”>

    <!– Custom styles for this template –>
    <link rel=”stylesheet” href=”css/style.css”>

    <!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
    <!–[if lt IE 9]>
      <script src=”http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js”></script>
      <script src=”http://cdn.bootcss.com/respond/1.4.2/respond.min.js”></script>
      <link rel=”stylesheet” type=”text/css” href=”css/iestyle.css” />
    <![endif]–>
    <style>
        [class*=”col-“],.container{

        padding-left:0;
        padding-right:0;
    }
    .row{

        margin-left:0;
        margin-right:0;
    }

    </style>
</head>

<body>
<div class=”container”>
    <div class=”sectionone”>
        <div class=”row”>
            <div class=”col-md-6″>
                <h2>易于使用</h2>
                <p>通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。</p>
            </div>
            <div class=”col-md-6″>
                <h2>构建快速</h2>
                <p>利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。</p>
            </div>
        </div>
    </div>
    <div class=”sectionfour”>
        <div class=”row”>
            <div class=”col-md-3″>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈dddd哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈dddd哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
            <div class=”col-md-3″>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈dddd哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈dddd哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
            <div class=”col-md-3″>呵呵呵呵呵额鹅鹅鹅呵呵呵呵呵额鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿呵呵呵呵呵额鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿呵呵呵呵呵额鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</div>
            <div class=”col-md-3″>呵呵呵呵呵额鹅鹅鹅呵呵呵呵呵额鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿呵呵呵呵呵额鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿呵呵呵呵呵额鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</div>
        </div>
    </div>
</div>
    <!– IE10 viewport hack for Surface/desktop Windows 8 bug –>
    <script src=”js/ie10-viewport-bug-workaround.js”></script>
    <script src=”http://cdn.bootcss.com/highlight.js/8.4/highlight.min.js”></script>
    <script src=”http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js”></script>
    <script src=”http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
    <script src=”js/site.js”></script>
</body>
</html>

一般手机端用rem做适配。大屏中屏幕小屏幕用Boot，如果用boot3则 给IE8及以下写固定宽度调整样式，电脑端的界面可以不用写col-xs-则每行都会掉下来，掉下来后给每个栅格按比例给百分比宽以及浮动。这样兼容IE7也好点。因为如果写了最小栅格在PC  IE8可做调整，但是IE7就不好调整了

.container{width:1000px;margin:0 auto;}
.sectionone [class*=”col-“]{

    float:left;
    width:50%;
}
.sectionfour [class*=”col-“]{

    float:left;
    width:25%;
}