如何使用Bootstrap响应式布局

本篇内容介绍了"如何使用Bootstrap响应式布局"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、栅格系统的工作原理：

1、在这个系统中我们的行（row）必须包含在我们的固定宽（.container）或者满屏宽度即宽度达到100%，这样可以方便我们为其添加合适的排列（aligment）和内补（padding）。

2、通过行（row）的特点我们可以在水平方向创建一组列（column）。

3、我们在使用的时候内容需要放置在列（column）中，而且只有列（column）才可以作为我们行（row）的直接子元素。

4、对于 .row和col-xs-4这种类的话我们是可以用来快速创建栅格布局的，不仅如此在bootstrap源码中定义的mixin也可以用来创建语义化布局。

5、在这是用这个布局的时候我们还可以通过设置padding属性。从而创建列和列之间的间隔（gutter），然后再通过.rowd的元素设置负值从而来抵消.container元素设置的padding，这个方法也就间接的为行（row）所包含的列（column）抵消掉padding。

6、如果这个系统的列是指定1到12的值从而来表示跨越范围。

7、系统中如果我们在进行设置的时候，如果一行（row）中包含了的列（column）大于12，多余的列所在的元素将作为一个整体另起一行排列。

二、使用Bootstrap响应式布局

首先我们在新的页面中添加下面这些代码，如下所示：

我们通过代码中可以知道，我们在mate标签中添加viewpirt属性，content中宽度等于设备宽度， initial-scale:页面首次被显示可见区域的缩放级别，取值1则页面按实际尺寸显示，无任何缩放；maximum-scale:允许用户缩放到的最小比例；user-scalable:用户是否可以手动缩放。

我们根据这个系统来看下面的代码和运行结果：

  
    
      
        
用户登录
        
          邮箱          
                                      
        
        
          密码          
                                      
        
        
          
            
                              记住我             
          
          
            忘记密码？          
        
        
          
            登录          
        
      
    
  

"如何使用Bootstrap响应式布局"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！