Beauty of Bootstrap 3 04-custom CSS, Theme, Package, bootstrap04-

Beauty of Bootstrap 3 04-custom CSS, Theme, Package, bootstrap04-

This article mainly includes:

■ Custom CSS
■ Custom Theme
■ Custom Package

 

Custom CSS

Sometimes, you need to customize or override the default CSS of Bootstrap.
Create a site.css file under the CSS folder.
To rewrite the containerclass

.container {
    background-color: #eee;
}

→Reference site.cssto index.html and place it below bootstrap. min. cs.

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

When you browse index.html, you can see that the background color has become gray.

 

Custom Theme

In the

        
            <div id="menu" class="navbar navbar-default">
                <div id="logo">
<A href = "."> Sina sports </a>
                </div>
                <ul>
<Li> <a href = "#"> homepage </a> </li>
<Li> <a href = "#"> about us </a> </li>
<Li> <a href = "#"> Contact Us </a> </li>
                </ul>
<Button class = "btn"> log on </button>
            </div>
        
Import the bootstrap-theme.min.csssample file under the cssfile to index.html and place it under 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 can see that the navigation content is framed in a rounded rectangle. If you are not satisfied with the current Theme, you can go to http://bootswatch.com/to activate the source theme. 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 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" />
The Theme of index.html has undergone major changes:

 
Custom Package
→ Open Website: http://getbootstrap.com/
→ Click Customize menu item
→ Select required options
→ Click the "Complie and Download" button at the bottom of the page to generate a custom Package.
 
Reference: WilderMinds
 
The "Beauty of Bootstrap 3" series of classes include:
Beauty of Bootstrap 3 01-download and introduce the beauty of Bootstrap 3 on the page 02-Grid introduction and beauty of APP Bootstrap 3 03-independent lines, text wrapping, image adaptive, hide element Bootstrap 3 beautiful 04-custom CSS, Theme, PackageBootstrap 3 beautiful 05-typographical, Button, Icon, Nav and NavBar, List, Table, FormBootstrap 3 beautiful 06- page Header, Breadcrumbs, Dropdowns, Button Dropdowns, use Button and Dropdowns to simulate Select, Input Groups, Thumbnails, Panels, and Wells

How can I find the referenced js and css used by bootstrap ??
Open the developer tool (F12) in Firefox or Google explorer ). Find the corresponding element and there will be a source on the right!




What is bootstrapcssmap used for this file?
This is the source map file.
Because bootstrap is written with less, less will be compiled into css and displayed on the page.
But there is a problem. The browser looks at the rows of css, And you edit less files, which is hard to match.
With source map, the browser displays less directly, which is very convenient.