Bootstrap 3 Beauty 04-Custom CSS, Theme, package

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.