Bootstrap 3 Beauty 04-Custom CSS, Theme, package

This article mainly includes:

Custom CSS
Custom Theme
Customizing the Package

Custom CSS

Sometimes, you need to customize or rewrite the bootstrap default CSS.
→ Create a site.css under the CSS folder
→ Suppose you want to rewrite the container class in Site.css

. container {
    Background-color: #eee;
}

→ Refer the site.css to the index.html and place it under Bootstrap.min.cs

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

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

Custom Theme

In the

        class= "container" >
            <div id= "menuclass="navbar navbar-default">
                <div id= "logo" >
                    <a href= "." > Sina Sports </a>
                </div>
                <ul>
                    <li><a href= "#" > Home </a></li>
                    <li><a href= "#" > About Us </a></li>
                    <li><a href= "#" > Contact Us </a></li>
                </ul>
                class= "btn" > Login </button>
            </div>
        
The Bootstrap-theme.min.css style file under the CSS folder is introduced into the index.html and placed below the 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"/>               

As we can see, 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/this site, the site provides bootstrap open source theme. For example, cyborg this theme interested, click the Download button, in the open page right click, select Save As, set the file name to Cyborg.bootstrap.min.css, and save to the Web site CSS folder.
Replace the original Bootstrap-theme.min.css file with the Cyborg.bootstrap.min.css file and change to the following:
    <link href= "css/bootstrap.min.css" rel= "stylesheet"/>
    <link href= "css/cyborg.bootstrap.min.css" rel= "stylesheet"/>
    <link href= "css/site.css" rel= "stylesheet"/>
Browsing the Index.html,theme topic again has changed a lot:
Customizing the Package
→ Open website: http://getbootstrap.com/
→ Click customize menu item
→ Tick the desired options
→ Finally click on the "Complie and Download" button at the bottom of the page to generate a custom package
Reference: Wilderminds
The "Bootstrap 3 Beauty" series includes:
Bootstrap 3 Beauty 01-Download and introduce page Bootstrap 3 beauty 02-grid Introduction and application Bootstrap 3 Beauty 03-independent line, text wrapping, picture adaptive, Hidden element Bootstrap 3 Beauty 04-Custom CSS, Theme, Package
Bootstrap 3 Beauty 04-Custom CSS, Theme, package