Bootstrap 3之美04-自定义CSS、Theme、Package

标签：style   blog   http   color   os   文件   ar   2014   div   

本篇主要包括：

■  自定义CSS
■  自定义Theme
■  自定义Package

  自定义CSS

有时候，需要自定义或重写Bootstrap默认的CSS。
→在css文件夹下创建一个site.css
→假设要对container类重写，在site.css中

.container {
    background-color: #eee;
}

    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />

  自定义Theme

在<header>区域内，给id为menu的div添加属性class="navbar navbar-default"，并调整如下：

        <header class="container">
            <div id="menu" class="navbar navbar-default">
                <div id="logo">
                    <a href=".">新浪体育</a>
                </div>
                <ul>
                    <li><a href="#">主页</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
                <button class="btn">登录</button>
            </div>
        </header>

把css文件夹下的bootstrap-theme.min.css样式文件引入到index.html中，并放置在bootstrap.min.css下方。如下：

    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />               

用Cyborg.bootstrap.min.css文件替代掉原先的bootstrap-theme.min.css文件，变成如下：

    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/Cyborg.bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />

再次浏览index.html，Theme主题发生了很大的变化：

  自定义Package

→打开网站：http://getbootstrap.com/
→点击Customize菜单项
→勾选需要的选项
→最后点击页面下方的"Complie and Download"按钮，这样就会生成自定义的Package

参考资料：WilderMinds  

“Bootstrap 3之美”系列类包括:

Bootstrap 3之美01-下载并引入页面

Bootstrap 3之美02-Grid简介和应用

Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

Bootstrap 3之美04-自定义CSS、Theme、Package

Bootstrap 3之美04-自定义CSS、Theme、Package

标签：style   blog   http   color   os   文件   ar   2014   div   

原文地址：http://www.cnblogs.com/darrenji/p/3929823.html