码迷,mamicode.com
首页 > Web开发 > 详细

响应式网站设计---Bootstrap

时间:2019-05-03 11:25:27      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:等于   直接   bootstra   原理   row   网页   适应   str   color   

响应式布局可以帮助我们实现网站布局随屏幕大小自动调整的需求,实现不同屏幕分辨率的终端上浏览网页的不同展示方式,使得网页在PC端和手机端均可以完美的展现其内容,具有自适应性。

使用基于Bootstrap的栅格系统

     Bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。Bootstrap的官方解释:Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为做多12列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局。

 

1. 栅格系统的工作原理

(1)行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列内补(padding)。 
(2)通过行(row)在水平方向创建一组列(column)。 
(3)自己内容应当放置于列(column)内,并且,只有列可以作为行(row)的直接子元素。 
(4)类似.row和.col-xs-4这种预定义的类,可以用来快速创建栅格布局。
(5)通过为列设置padding属性,从而创建列与列之间的间隔(gutter)。通过为.row元素设置负值margin从而抵消为.container元素设置的padding,也就间接为行(row)所包含的列(column)抵消掉了padding。 
(6)栅格系统的列是通过指定1到12的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4来创建。 
(7)如果一行(row)中包含了的列(column)大于12,多余的列所在的元素将作为一个整体另起一行排列。 
(8)栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕覆盖栅格类。 

 <div class="container">

            <h1>Hello, world!</h1>
         
            <div class="row">
         
               <div class="col-md-3" style="background-color: #dedef8;box-shadow: 
                  inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                  <h4>第一列</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
               </div>
         
               <div class="col-md-9" style="background-color: #dedef8;box-shadow: 
                  inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                  <h4>第二列 - 分为四个盒子</h4>
                  <div class="row">
                     <div class="col-md-6" style="background-color: #B18904;
                        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                           assumenda minim organic quis.
                        </p>
                     </div>
                     <div class="col-md-6" style="background-color: #B18904;
                        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p> sed do eiusmod tempor incididunt ut labore et dolore magna 
                           aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                           ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </p>
                     </div>
                  </div>
         
                  <div class="row">
                     <div class="col-md-6" style="background-color: #B18904;
                        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>quis nostrud exercitation ullamco laboris nisi ut 
                           aliquip ex ea commodo consequat.
                        </p>
                     </div>   
                     <div class="col-md-6" style="background-color: #B18904;
                        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                           sed do eiusmod tempor incididunt ut labore et dolore magna 
                           aliqua. Ut enim ad minim.</p>
                     </div>
                  </div>
         
               </div>
         
            </div>
         
         </div>

 

响应式网站设计---Bootstrap

标签:等于   直接   bootstra   原理   row   网页   适应   str   color   

原文地址:https://www.cnblogs.com/xcsg/p/10804472.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!