美文网首页
boostrap了解

boostrap了解

作者: ant_1024 | 来源:发表于2018-05-14 09:59 被阅读4次

    创建的网页开头使用html5的文档类型,否则可能面临浏览器不一致的问题

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    对移动设备友好,确定适当的绘制和触屏缩放,在网页的head之中添加
    initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
    通常情况下,maximum-scale=1.0 与 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="响应式图像">
    源码:
    .img-responsive {
    display: 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 的默认字体样式为 "Helvetica Neue", Helvetica, Arial, sans-serif。
    第二条规则设置文本的默认字体大小为 14 像素。
    第三条规则设置默认的行高度为 1.428571429。
    第四条规则设置默认的文本颜色为 #333333。
    最后一条规则设置默认的背景颜色为白色

    排版
    使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。

    链接样式
    通过属性 @link-color 设置全局链接的颜色。
    对于链接的默认样式,如下设置:
    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;
    }

    容器(Container)
    <div class="container">
    ...
    </div>
    源码
    .container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }

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

    .container:after {
    clear: both;
    }

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

    Chrome Firefox IE Opera Safari
    Android YES YES 不适用 不适用 不适用
    iOS YES 不适用 不适用 不适用 YES
    Mac OS X YES YES 不适用 YES YES
    Windows YES YES YES* YES 不适用

    相关文章

      网友评论

          本文标题:boostrap了解

          本文链接:https://www.haomeiwen.com/subject/zyrddftx.html