The Beauty of Bootstrap 304-Customized CSS, Theme, Package_html/css_WEB-ITnose

This article mainly includes:

■ Custom CSS
■ Custom Theme
■ Custom Package

Custom CSS

Sometimes, you need to customize or rewrite Bootstrap’s default CSS.
→Create a site.css in the css folder
→Suppose you want to rewrite the container class, in site.css

.container {    background-color: #eee;}

→Reference site.css to index.html and placed below bootstrap.min.cs

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

→Browse index.html and find that the background color has turned gray

Custom Theme

In the

area, add the attribute class="navbar navbar-default" to the div with the id of menu, and adjust it as follows:

        <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>

Change the css folder The bootstrap-theme.min.css style file is introduced into index.html and placed below bootstrap.min.css. As follows:

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

We see that the navigation content is framed in a rounded rectangular box. If you are not satisfied with the current Theme, you can also go to http://bootswatch.com/, which provides Bootstrap open source Theme. For example, if you are interested in the Cyborg Theme, click the Download button, right-click on the opened page, select Save As, set the file name to Cyborg.bootstrap.min.css, and save it to the css folder of the website.

Replace the original bootstrap-theme.min.css file with the Cyborg.bootstrap.min.css file, which becomes as follows:

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

Browse the index again .html, the theme has changed a lot:

Custom Package

→Open the website: http://getbootstrap.com /
→Click the Customize menu item
→Check the required options
→Finally click the "Complie and Download" button at the bottom of the page, this will generate a customized Package

Reference materials: WilderMinds

The "Beauty of Bootstrap 3" series includes:

The Beauty of Bootstrap 3 01-Download and introduce the page

The beauty of Bootstrap 3 02-Grid introduction and application

The beauty of Bootstrap 3 03-independent rows, text wrapping, image adaptation, hidden elements

The beauty of Bootstrap 3 04-customized CSS, Theme, Package

The Beauty of Bootstrap 3 05-Typography, Button, Icon, Nav and NavBar, List, Table, Form