编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

Bootstrap 3.0 的一些使用经验

作者:汪宇杰  发布日期:2013-12-09 21:37:16
  • 收藏本文    我要投稿
  • Bootstrap是一套很流行的网页前端框架,我用它已经有一段时间了。最新版本为3.0,是针对移动设备优化的。今天写下这篇文章总结一下使用中的经验。

    首先,bootstrap的官方网站是 http://getbootstrap.com/ 中文文档是国人自己捣鼓的 http://v3.bootcss.com/

    中文网站会随着官方网站同步更新,所以看中文版完全没有问题。

    一、Bootstrap和ASP.NET

    大部分看我博客人都是ASP.NET开发者,所以我优先写ASP.NET的应用。

    在ASP.NET中,要引用bootstrap最方便的途径就是通过VS的nuget去下载:https://www.nuget.org/packages/Twitter.Bootstrap/ 这个包是官方原版的,当然,nuget上也有一些bootstrap的mod下载,比如我博客就用了metro-bootstrap:https://www.nuget.org/packages/metro-bootstrap/

    如果你使用的是VS2013,那新建的网站,不管是WebForm还是MVC,都会自带Bootstrap官方原版框架。

    需要注意一点,VS建立的默认网站中,会有一个CSS规则覆盖了bootstrap的默认规则,导致文本框不能100%宽度。这个位置在Site.css里:

    /* Set width on the form input elements since they're 100% wide by default */
    input,
    select,
    textarea {
        max-width: 280px;
    }

    如果你遇到文本框不能自动拓宽的问题,就把上面这段代码删除掉吧。

    二、皮肤和主题

    如果你不满意官方原版的样式,又不想自己去写CSS的话,可以看看下面这两个链接

    免费主题:http://bootswatch.com/

    收费主题:https://wrapbootstrap.com/

    除此之外,你可以自己用firebug等工具调试和修改自己需要的样式。注意,不建议更改bootstrap源文件,一般我们会新建一个css,将覆盖规则写在新的css文件中,然后将这个文件引用在bootstrap CSS的下面,这样浏览器根据优先级,当规则冲突的时候会选择我们自己写的CSS而不是bootstrap原来的CSS。

    重写规则的时候,注意要针对多种屏幕分辨率书写。bootstrap采用的是@media查询,比如:

    @media (min-width: 1200px) {
    ......
    }

    所以,当你重写规则的时候,请仔细检查各种分辨率下的显示情况,不要有遗漏。

    三、中文网站的字体问题

    Bootstrap默认是对英文字体优化的,所以中文环境下需要我们自己写一些规则。我个人喜欢使用微软雅黑字体。然而,微软雅黑的每个版本显示都不一样。比如Windows 8和Windows 8.1中的雅黑字体在网页上粗细不一致。为了做到统一,经过测试,我发现只要指定font-weight为500就可以统一了:

    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Arial", "Verdana", "Tahoma";
        font-weight: 500;
    }

    注意,除了H级标题元素以外,如果你需要网页字体也使用雅黑,那还要重写body的样式,但是这次不需要指定font-weight

    body {
        font-family: "Microsoft YaHei", "Arial", "Verdana", "Tahoma";
        color: #424242;
    }

    四、栅格系统的注意事项

    注意,任何时候你需要做栅格嵌套,都需要加上一个row。所以不要这样写:

    <div class="row">
        <div class="col-md-6">
            <div class="col-md-3"></div>
            ...
        </div>
    

    而应该这样写:

    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-3"></div>
                ...
            </div>
        </div>
    </div>

    五、和其他框架的冲突

    经测试,许多样式冲突是由于Bootstrap 3.0新的规则:box-sizing引起的。所以一旦遇到样式问题,首先查box-sizing是否冲突。

    六、IE8的响应式布局

    一句话,要让IE8支持响应式布局,仅仅需要一个JS:https://www.nuget.org/packages/Respond/

    但是强烈建议用JS或服务器端检测客户端是否为IE8,只有为IE8时才加载这个JS。

Tag标签:Bootstrap  
  • 专题推荐