Bootstrap依傍Bootstrap响应式网格系统

Bootstrap响应式(适应被不同之极端设备).Bootstrap栅格系统是用百分比把视口等分为12单,然后以媒体询问,设置float属性使的并列显示

一.媒体查询

传媒询问富含一个可选的传媒类型以及零或几近只表达式来限制使用媒体特性的样式表范围

例如width,height,color.CSS3倍受的Media
queries让内容的展现得独自对一定范围的输出设备而休自然去改变内容本身.

以下是Bootstrap常用媒体询问尺寸

@media (max-width: 767px) {}   /*小于等于767像素*/
@media (min-width: 768px) and (max-width: 991px) {} /*768~991px像素之间(包含最小像素768与最大像素991)*/
@media (min-width: 992px) and (max-width: 1199px) {} /*992px~1199px像素之间(包含最小像素992与最大像素1199)*/
@media (min-width: 1200px) {} /*大于等于1200px*/

常用媒体询问分辨率分界点截图

Bootstrap 1

三.Bootstrap栅格系统百分于计算 12/100 =
栅格等分/x(百分比)

* { box-sizing: border-box; } 
[class*="col-"] { float: left; padding: 15px; border: 1px solid red; } 
.col-1 {width: 8.33%;} 
.col-2 {width: 16.66%;} 
.col-3 {width: 25%;} 
.col-4 {width: 33.33%;} 
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;} 
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

三.兑现当浏览器尺寸小于等于767px像素垂直排列显示,当浏览器尺寸超过767px像从排成一行显示

Bootstrap 2

四.关于IE兼容性说明

 <meta name=”viewport”
content=”width=device-width; initial-scale=1.0″> 

viewport凡网页默认的涨幅与冲天,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积之100%.

 所有主流浏览器都支持之装置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要动用css3-mediaqueries.js .(或者以respond.js否得吃IE6-IE8支持CSS3 media Query)

 让IE(包括IE6)浏览器支持HTML5业内<语义化标签等>
需要使用html5.js

 源代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算  Google Chrome 内嵌浏览器框架GCF-->
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <!--viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),
        原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%-->
        <meta name="viewport" content="width=device-width; initial-scale=1.0">
        <!--[if IE]>
             <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
             <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
        < ![endif]-->
        <title>媒体查询</title>
        <style>
            html, body, div, p, header,hgroup, h1, h2,article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
                margin: 0;
                padding: 0;
            }
            /*HTML5 新增语义化标签*/
            article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
                display: block;
            }
            html {
                font-size: 100%;
            }
            body {
                width: 100%;
                height:100%;
                font-size: 1rem;
                background-color:#fff;
                color:#333;
                font-family:"华文细黑 Regular", "Helvetica", "Arial", "Verdana", "sans-serif";
                -webkit-font-smoothing: antialiased;
            }
            *, *:before, *:after {
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }
            header {
                padding-left: 0.9375em;
                padding-right: 0.9375em;
                background-color: #000000;
                line-height: 2.5em;
            }
            h2 {
                font-size: 1.125em;  /*1 ÷ 16 × 18 = 1.125em值*/
                color: #FFF;
            }
            .container {
                padding-top:  0.9375em;
                padding-bottom:  0.9375em;
                padding-left: 0.9375em;
                padding-right: 0.9375em;
            }
            .container p {
                line-height: 1.5em;
            }
            .row-box{
                display: block;
            }
            /*---------------------------------------—--------
              栅格系统
             *----------------------------------------------- */
            .col-sm-4  {
                position: relative;
                min-height: 1px;
                width: 100%;
                padding-right: 15px;
                padding-left: 15px;
                color: #FFFFFF;
                font-weight: 600;
            }
            [class*="col-sm-"] {
                padding-top:15px;
                padding-bottom: 15px;
            } 
            /*小于等于767像素*/
            @media (max-width: 767px) {
                .col-sm-4 {
                    width: auto;
                }
            }  
            /*768~991px像素之间(包含最小像素768与最大像素991)*/ 
            @media (min-width: 768px) and (max-width: 991px) {
                .col-sm-4 {
                    width: 33.3%;
                    float: left;
                }
            } 
            /*992px~1199px像素之间(包含最小像素992与最大像素1199)*/
            @media (min-width: 992px) and (max-width: 1199px) {
                .col-sm-4 {
                    width: 33.3%;
                    float: left;
                }
            } 
            /*大于等于1200px*/
            @media (min-width: 1200px) {
                .col-sm-4 {
                    width: 33.3%;
                    float: left;
                }
            }
            /*----------------------------------------
             底部导航
            *----------------------------------------*/
            footer {
                position: fixed;
                width: 100%;
                bottom: 0;
                padding-left: 0.9375em;
                padding-right: 0.9375em;
                line-height: 2.5em;
                background-color: #000000;
                color: #FFFFFF;
            }
        </style>
    </head>
    <body>
        <header>
            <hgroup>
                <h2>头部导航</h2>
            </hgroup>
        </header>
        <div class="container">
            <p>所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js</p>
            <p> HTML5-JS文件-让IE(包括IE6)浏览器支持HTML5标准 需要使用html5.js</p>让支持HTML5元素
            <div class="row-box">
                <div class="col-sm-4" style="background-color: #ef0655;">AAA</div>
                <div class="col-sm-4" style="background-color: #00AABB;">BBB</div>
                <div class="col-sm-4" style="background-color: #285E8E;">CCC</div>
            </div>
        </div>
        <footer><h2>底部导航版权 @By Avenstar</h2></footer>
    </body>
</html>

作者:Avenstar

出处:http://www.cnblogs.com/zjf-1992/p/6166443.html

至于作者:专注让WEB前端开发

正文版权归作者所有,转载请标明原文链接。

若是以为自身的篇章对君有因此,请随意打赏。您的支持将鼓励我连的迭代!

Bootstrap 3

支付宝

Bootstrap 4

微信

【参考资料】

 
https://my.oschina.net/JeeChou/blog/198464

 
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media\_queries

 
https://developer.mozilla.org/en-US/docs/Web/CSS/Media\_Queries/Using\_media\_queries

  http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
 good tutorials

 
http://qianduanblog.com/post/bootstrap3-learning-1-responsive-layout.html

 
http://www.ruanyifeng.com/blog/2012/05/responsive\_web\_design.html

 
http://bootstrap.ninghao.net/scaffolding.html

 
https://segmentfault.com/a/1190000007567739

  http://v3.bootcss.com/css/\#grid

相关文章