BOOTSTRAP4 Chinese Version

Chinese version of website: www.boot4.comIntroduced

Bootstrap is the world's most popular framework for building responsive, mobile-focused sites and applications. In which you can find high-quality HTML, CSS, and JavaScript to make your project incredibly simple.

Here's how to quickly get started with Bootstrap CDN and create a template page.

Directory

• Quick Start

• Start template

• Important goals

• HTML5 Document Type

• Response Meta-Tags

• Box model

• Normalize.css

• Community

Quick Start

Want to quickly add Bootstrap to your project? Then use the Bootstrap CDN, which is provided free of charge by MaxCDN. Want to use a package manager or need to download source files? Go to the Downloads page.

Before other stylesheets are loaded into our CSS, paste the copied style sheet <link> into your .

Copy

<link rel= "stylesheet" href= "Https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" >

Add JavaScript plugins and jQuery to the end of the page, just </body> before. Remember to add jQuery first because our code relies on it.

Copy

<script src= "Http://ajax.useso.com/ajax/libs/jquery/2.1.4/jquery.min.js" ></script> <script src= " Https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js "></script>

That's it-you're building a way to fully use the Bootstrap site. If you're not familiar with the General page structure, go ahead and read the code for some page template examples.

Start template

To make sure your page is based on the latest design and development standards, this means:

• Using the HTML5 document type

• To make Internet Explorer use the latest rendering mode (read more)

• Next, use the view meta tag

Put them together and your page will look like this:

Copy

<! Doctype html>  
This is all the page configuration you need to complete. Read the layout documents and official examples to place your site content and components.
 Important goals
Bootstrap uses a few important global styles and settings that you have to notice during use, which are almost only applicable to cross-browser style normalization. Let's take a closer look:
 HTML5 Document Type
Bootstrap requires the use of the HTML5 document type. Without it, you will see some incomplete patterns, but incorporating them will not cause significant problems.
 
Copy
 
<! DOCTYPE html> 
 Response Meta-Tags
Bootstrap is developed to be mobile-first, which requires that we first optimize the code for mobile devices and then use CSS Media queries to expand the components. To ensure the rendering and touch effects of all devices. To give you the  add-responsive view meta tag.
 
Copy
 
<meta name= "viewport" content= "Width=device-width, initial-scale=1" >
 
You can see such an example in the starter template.
 Box model
For the more simple size of the CSS, we change the global box-sizing value from Content-box to border-box . This ensures that the padding last calculated width of an element is not affected, but it can also cause problems with some third-party software such as Google Maps and Google's praise search engine.
 
In rare cases you need to rewrite it, for example:
 
Copy
 
. selector-for-some-widget {-webkit-box-sizing:content-box;           -moz-box-sizing:content-box; Box-sizing:content-box; }
 
With the above fragment and nested elements – including through :before and :after generated content – will .selector-for-some-widget inherit the specific box-sizing .
 
Learn more about box models and how to tweak CSS.
 Normalize.css
To improve cross-browser effects, we use NORMALIZE.CSS to handle inconsistencies between different devices and browsers. Then we will use reboot to create our own, slightly opinionated style to further improve this aspect.
 Community
Always follow the latest developments in Bootstrap and join the community to get useful resources:
 
 
    
 
     
 
      
Focus on @getbootstrap on Twitter.
 
      
Read and contribute to the official Bootstrap Blog.
 
      
Join the official Slack.
 
      
Talk to Bootstrap people on IRC. On the irc.freenode.net server, or in the ##bootstrap channel.
 
      
Implementation help can be found in the Stack Overflow (tag twitter-bootstrap-3).
 
      
When distributed using NPM or a similar delivery mechanism in order to get the maximum functionality, developers need to use the keywords on the package bootstrap , which can improve or increase the functionality of Bootstrap.
 
     
 
    
 
BOOTSTRAP4 Chinese Version