BootStap学习笔记(1)-tuohaibei

为了让开发的网站对移动设备友好,确保适当的绘制和触屏缩放，需要在网页的head之中添加viewport meat标签：如下：

  响应式图像:  

 通过对图像添加class="img-responsive"可以让图像对响应式布局设计的更好； 

  伪元素  

http://www.w3school.com.cn/css/css_pseudo_elements.asp 

 Bootstrap3 css有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为container设置了max-width,用以匹配网格系统. 

  @media (min-width: 768px) {
   .container {
      width: 750px;
  } 

  网格系统  

提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
 

    行必须放置在  .container  class 内，以便获得适当的对齐（alignment）和内边距（padding); 

    使用行来创建列的水平组； 

    内容应该放置在列内，且唯有列可以是行的直接子元素； 

    预定义的网格类，比如  .row  和  .col-xs-4 ，可用于快速创建网格布局。其中如果有多行,那么每行都要有.row 

 个人总结:如果同时定义了col-sm-* col-md-* col-lg-*,那么如果有匹配的就会采用匹配的列模式，如果窗口应用了col-lg-*,此时删除col-lg-*,那么窗口布局就会采用col-md-*。  

  


      
查看更多关于BootStap学习笔记(1)-tuohaibei的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did115639