Home > Others

10 minutes to get you started Bootstrap

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Bootstrap profile what is bootstrap?

    • Frame: Lib Library
    • jquery, as a framework, provides a relatively convenient way to manipulate the DOM
    • Pre-write the functions that everyone needs. That's a framework.

    • Bootstrap makes our Web development easier and faster;

    • Note that Bootstrap is not bootstrap!. This is a word, not a synthetic word, meaning: N. Boot command, boot program
    • Bootstrap is now the most Popular Front-end framework (interface toolset);
    • Features are flexible and concise, code elegant, beautiful and generous;
    • The goal is to make WEB development more agile;

    • It was the two front-end engineers at Twitter, Mark Otto and Jacob Thornton, who were launched in the 2011-year period and completed the first version of the development in their spare time;

Why use Bootstarp?
    • Ecological Circle Fire, constantly updated iteration;
    • Provide a set of beautiful and generous interface components;
    • Provide a set of elegant html+css coding specifications;
    • Make our Web development more simple and faster;
Attention:

Using Bootstrap doesn't mean you don't have to write CSS styles, but you don't have to write most of the styles that everyone will use.

Ready to download Bootstrap
    • Https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
    • Https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zip
Installing bootstrap 
<! DOCTYPEHtml><Html lang="EN"><Head><Meta charset="UTF-8"><Title> Page Title</Title><!--Introducing Bootstrap core style files (required)--<Link Rel="Stylesheet" href="Css/bootstrap.min.css"><!--introduce bootstrap default theme style (optional)--<Link Rel="Stylesheet" href="Css/bootstrap.theme.min.css"><!--your own style or other file--<Link Rel="Stylesheet" href="Example.css"></Head><Body><!--your HTML structure ...-<!--The following code, if you do not use JS plug-in do not need-<!--because Bootstrap's JS plugin relies on Jquery,so to introduce jquery--<Script Src="Js/jquery.min.js"></Script><!--introduce all the bootstrap JS plugins--<Script Src= "bootstrap.min.js" ></script> Span class= "CO" ><!--your own script file--<< Span class= "Hljs-name" >script src=  "example.js"  ></script>< Span class= "Hljs-tag" ></body></HTML>
Bootstrap documentation
    • Official documents
    • Chinese documents
Basic Bootstrap templates 
<! DOCTYPEHtml><Html lang="EN"><Head><Meta charset="Utf-8"><Meta Name="Viewport" Content="Width=device-width, initial-scale=1.0, User-scalable=no"><Meta http-equiv="X-ua-compatible" Content="Ie=edge"><Meta Name="Viewport" Content="Width=device-width, initial-scale=1"><!--the above 3 meta tags *must* come first in the head; Any other head content must come *after* these tags--<Title>bootstrap 101 Template</Title><!--Bootstrap--<Link href="Css/bootstrap.min.css" Rel="Stylesheet"><!--HTML5 Shim and Respond.js for IE8 support of HTML5 elements and media queries-<!--WARNING:Respond.js doesn ' t work if you view the page via file://--<!--[If Lt IE 9]><script src= "Https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" ></script><script src= "Https://oss.maxcdn.com/respond/1.4.2/respond.min.js" ></script><! [endif]--></Head><Body><H1>hello, world!</H1><!--jQuery (necessary for Bootstrap ' s JavaScript plugins)--<Script Src="Https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!--Include all compiled plugins (below), or include individual files as needed-- > <script src="Js/bootstrap.min.js"></script> </ body></html>
Compatible 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
    • This property is a document-compatible mode declaration that indicates that the current document is rendered using the latest standard in IE browser
Visual port 
< meta name=  "viewport"  content= "width= Device-width, initial-scale=1 ">
    • Viewport role: In a mobile browser, when the page width exceeds the device, the browser inside a virtual page container, the page container is scaled to the size of the device, and then show
    • At present, most mobile browser viewport (the container hosting the page) width is 980;
    • The width of the viewport can be set via the META tag
    • This property is set for the mobile page viewport, and the current value represents the width of the device on the mobile page, and is not scaled (zoom level is 1)
    • Width: viewport widths
    • Initial-scale: Initializing Scaling
    • User-scalable: Whether users are allowed to scale themselves (value: yes/no; 1/0)
    • Minimum-scale: Minimum scale, generally set the user does not allow scaling, there is no need to set the minimum and maximum zoom
    • Maximum-scale: Max Zoom
Conditional comment
    • The function of conditional annotations is that when a condition is satisfied, the HTML code in the comment is executed, and when it is not satisfied, it is ignored as a comment.
Third-party dependencies

    • Jquery

      All JS components in the bootstrap framework depend on the jquery implementation

    • Html5shiv

      Allow low-version browsers to recognize HTML5 new tags, such as header, footer, section, etc.

    • Respond

      Allow the low-version browser to support the CSS media query function

It is suggested that the introduction of footsteps in the HTML will be placed at the bottom of the page mediaquery 
@Media(Judging condition (for the current window)) { /* the code here only executes when the condition is met */}@media  (min-width: 768px)  and  (max-width:< Span class= "DV" > 992px)  {  /* the code here is only executed when (min-width:1280px) is satisfied */  .container { width: 750px; }}             /span>
    • When using Min-width as a judging condition must be small to large, the reason is the CSS from the top down to execute
Base CSS Style
    • Profile
    • Preset layout style
      • Uniform prefabricated label styles
    • Button style
    • Table Style
    • Form Style
    • Picture Style
    • Auxiliary Tools Class
    • Code style
    • Grid system
      • XS : ultra-small screen phone (<768px)
      • SM : Small screen tablet (≥768px)
      • MD : Medium-screen desktop display (≥992px)
      • LG : Large screen large desktop display (≥1200px)
    • Responsive Tool Class
      • hidden-xx : Hiding in some sort of screen
      • visible-xx : Display in a certain screen size
Pre-built interface components
    • Navigation
    • Navigation bar
    • Breadcrumbs Navigation
    • Drop-down menu
    • Push-button drop-down menu
    • Button Group
    • Input Box Group
    • Warning Box
    • Page Header
    • Page out
    • List groups
    • Panel
    • Media Objects
    • Progress bar
    • Glyphicons
    • Label
    • Badge
    • Thumbnail images
    • Big screen
    • Embed content
    • Embedded
JavaScript plug-in JavaScript plugin dependencies How to use the JavaScript plugin built-in components
    • modal dialog box
    • Drop-down menu
    • Scrolling monitoring
    • tab page
    • Tool Tips
    • Pop-up box
    • Warning Box
    • Button
    • Folding Panel
    • Carousel Diagram
    • Top-suction effect
      • Data-spy= "Affix"
      • Data-offset-top= "Where does it come from?"
      • Data-offset-bottom= "Where's The Vanishing Place"?
Deep Custom Bootstrap Online customization
    • Website online
    • Chinese Network online
Source compilation Less language
    • Official documents
    • Chinese documents
    • Reprint: http://www.cnblogs.com/dujuncheng/p/6140286.html

10 minutes to get you started Bootstrap

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More