• bootstrap入门-2.固定的内置样式


    HTML5文档类型(Doctype

    Bootstrap使用了一些HTML5元素和CSS属性,所以需要使用HTML5文档类型。

    <!DOCTYPE html>
    
    <html>
    
    ....
    
    </html>

    移动设备优先

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

      宽度设置为device-width可以确保它能正确呈现在不同设备上。

      initial-scale=1.0确保网页加载时,以1:1的比例呈现。

      可以为viewport meta标签添加user-scalable=no来禁止其缩放功能。

    <meta name="viewport" content="width=device-width,
    
                                         initial-scale=1.0,
    
                                         maximum-scale=1.0,
    
                                         user-scalable=no">

    响应式图像

    <img src="..." class="img-responsive" alt="响应式图像">

      bootstrap.css里设置了img-responsive的属性:

    .img-responsive {
    
      display: inline-block;
    
      height: auto;
    
      max-width: 100%;
    
    }

    基本的全局显示

    body {
    
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    
      font-size: 14px;
    
      line-height: 1.428571429;
    
      color: #333333;
    
      background-color: #ffffff;
    
    }
    
    body {margin:0}

    链接样式

    a:hover,
    
    a:focus {
    
      color: #2a6496;
    
      text-decoration: underline;
    
    }
     
    
    a:focus {
    
      outline: thin dotted #333;
    
      outline: 5px auto -webkit-focus-ring-color;
    
      outline-offset: -2px;
    
    }

      默认设置有好有坏,难免嘛。

      不想要下划线的话可以在a链接上加一个名为btn的class,该class的默认设置如下:

    a:hover,
    
    a:focus {
    
      color: #2a6496;
    
      text-decoration: underline;

    }
    a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;

    }

    避免跨浏览器的不一致

      Normalize.css提供了更好的跨浏览器一致性。

    容器(Container

    <div class=”container”>
    
    ...
    
    </div>

      .container的样式:

    .container {
    
       padding-right: 15px;
    
       padding-left: 15px;
    
       margin-right: auto;
    
       margin-left: auto;
    
    }

      左右外边距交由浏览器决定。

      由于内边距是固定宽度,默认情况下容器是不可嵌套的。

    .container:before,.container:after {
    
      display: table;
    
      content: " ";
    
    }

      设置display为table,会创建一个匿名的table-cell和一个新的块格式化上下文。:before伪元素防止上边距崩塌,:after伪元素清除浮动。content:” ”修复一些Opera bug。

    .container:after {
    
      clear: both;
    
    }

      另外还有申请相应的媒体查询:

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

    Bootstrap浏览器/设备支持

     

    Chrome

    Firefox

    IE

    Opera

    Safari

    QQ

    UC

    Android

    YES

    YES

    NO

    NO

    NO

    未测试

    未测试

    iOS

    YES

    NO

    NO

    NO

    NO

    YES

    YES

    Mac OS X

    YES

    YES

    NO

    YES

    YES

    未测试

    未测试

    Windows

    YES

    YES

    YES*

    YES

    NO

    YES

    YES

    * Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

     

    参考:http://www.runoob.com/bootstrap/bootstrap-css-overview.html

  • 相关阅读:
    使用python打印九九乘法表
    python导入库的几种方式
    节点的介数
    连通图、强连通图、弱连通图
    python的基本格式化输出
    pycharm中的py文件重命名
    设置pycharm,在python程序的开头添加时间和作者等信息
    使用pandas库对csv文件进行筛选和保存
    python获取Excel表中某一格的数据
    使用python向txt文件写入内容
  • 原文地址:https://www.cnblogs.com/xulei1992/p/5883997.html
Copyright © 2020-2023  润新知