zoukankan      html  css  js  c++  java
  • Bootstrap -网格-基础,自适应

    Bootstrap 

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    一个扩展包

    主要用于响应式网站设计(网站内容根据用户环境,比如手机,笔记本,浏览器大小,屏幕分辨率)进行自动调整。 挺简单的东西非要起个高大上的名字- -

    基本格式:col-型号-列数     

    型号:

    手机:col-xs- 

    平板:col-sm-

    笔记本:col-md-

    宽屏:col-lg-

    屏幕过小时(比如你用col-md-6,但是在手机上看)就会把内容纵向排列。

    列数:

    Bootstrap 把每列分成了12部分,如class="col-md-12"就是中等大小的浏览器下占满一行,class="col-md-6"就是中等大小的浏览器下占一半

    例子:

    <div class="container">
       <div class="row">
          <div class="col-md-4">1</div> <!--确保每行列数总和是12-->
          <div class="col-md-8">2</div>      
       </div>
       <div class="row">...</div>
    </div>

    列重置:根据屏幕大小使用不同的格式排列

    <div class="col-xs-6 col-sm-3">1</div>

    <div class="col-xs-6 col-sm-3">2</div>

    <div class="col-xs-6 col-sm-3">3</div>

    <div class="col-xs-6 col-sm-3">4</div>

    小屏幕上占1/2,大屏幕上占1/4

    如果不加col-xs-6,则大屏幕上占1/4,屏幕缩小时纵向列出,每个占一行。

  • 相关阅读:
    ubuntu 16.04 连接无线网络
    linux的内存管理-抛砖引玉
    linux的进程调度-抛砖引玉
    AliOS Things 异步事件框架Yloop
    AliOS Things 云端物联网操作系统
    linux performance tools
    linux进程调度
    linux 内核Lockup机制浅析
    cache和内存屏障
    linux设备模型及实例
  • 原文地址:https://www.cnblogs.com/clamp7724/p/11247962.html
Copyright © 2011-2022 走看看