Home > Developer > Web Develop
<! DOCTYPE html>
<!--is scheduled for content, and the content is encoded in the format--
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<!--to ensure proper drawing and scaling, you need to add the viewport metadata label in <meta name= "viewport" content= "Width=device-width, initial-scale=1" >
<!--the label's properties user-scalabel=no to prevent the page from shrinking, making it a scrolling
<meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1, User-scalable=no" >
-
<link rel= "stylesheet" href= "Resources/bootstrap/css/bootstrap.min.css"/>
<!--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= "Http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js" ></script>
<script src= "Http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js" ></script>
<! [endif]-->
<script type= "Text/javascript" src= "Resources/bootstrap/jquery.min.js" ></script>
<script type= "Text/javascript" src= "Resources/bootstrap/js/bootstrap.min.js" ></script>
<body>
<!--bootstrap layout link style sets the basic global style--
<!--bootstrap a package for page content and grid systems. Container container, bootstrap a total of two containers, because of the properties of padding and other reasons, they can not be nested with each other--
<!--container class for containers that are fixed-width and support responsive layouts, container-fluid similar to width 100%, which occupies the full view of the container--
<div class= "Container" >
The <!--grid system is a responsive, mobile-first streaming raster system provided by Bootstrap, which is automatically divided into up to 12 columns as the screen or viewport (viewport) size increases. It contains predefined classes that are easy to use, and powerful mixin for generating more semantic layouts--
<!--row must be included in the. container (fixed width) or. Container-fluid (100% width) to give it the appropriate arrangement (aligment) and inner complement (padding).
Create a set of columns (column) horizontally from row. -
<div class= "Row" >
<!--xs: ultra-small, SM: small screen, MD: Mid-screen, LG: Big screen, col: Show Columns--
<div class= "Col-md-1 col-sm-1" >.col-md-1</div>
<div class= "Col-md-2 col-sm-2" >.col-md-2</div>
<div class= "col-md-3 col-sm-3" >.col-md-3</div>
<div class= "Col-md-4 col-sm-4" >.col-md-4</div>
<div class= "Col-md-2 col-sm-2" >.col-md-2</div>
</div>
<div class= "Row" >
<!--to better adapt to the view-->
<div class= "Col-md-8 col-lg-8" >.col-md-8</div>
<div class= "Col-md-4 col-lg-4" >.col-md-4</div>
</div>
<div class= "Row" >
<div class= "Col-md-5 col-xs-5" >.col-md-5</div>
<div class= "Col-md-6 col-xs-6" >.col-md-6</div>
<div class= "Col-md-1 col-xs-1" >.col-md-1</div>
</div>
<div class= "Row" >
<div class= "Col-md-7" >.col-md-7
<div class= "Row" >
<div class= "col-md-11" >
Internal nesting of row
</div>
<div class= "col-md-1" >row internal nesting </div>
</div>
</div>
<div class= "Col-md-5" >.col-md-5</div>
</div>
<!--you can easily change the order of columns (column) by using the. col-md-push-* and. col-md-pull-* classes. -
<div class= "Row" >
<div class= "col-lg-pull-10" >pull</div>
<div class= "Col-lg-push-2" >push</div>
</div>
<!--can also include a <small> tag or an element assigned to the. Small class within the title, which can be used to mark subheadings. -
<small>secondary text</small>
<small>secondary text</small>
<small>secondary text</small>
<small>secondary text</small>
<small>secondary text</small>
<small>secondary text</small>
<!--page body
Bootstrap set the global font-size to 14px,line-height to 1.428. These attributes are directly assigned to the <body> element and all paragraph elements.
In addition, the,<p> (paragraph) element is also set to the bottom margin (margin) equal to 1/2 rows high (that is, 10px). -
<div>
<!--for deleted text, use tags <del>-->
<del>nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus</del>
<!--emphasizes a piece of text by adding font-weight values. You can use tags <strong-->
Et Magnis <strong>dis parturient</strong> Montes,
<!--text with italic emphasis, using tags <em>-->
<em>nascetur Ridiculus mus.</em>
Nullam ID dolor ID nibh ultricies vehicula.
<!--used to highlight some of the text, using tags <mark>-->
Cum sociis natoque
<mark>penatibus</mark>
Et magnis dis parturient montes,
<!--for unused text, use tags <s>-->
<s> nascetur ridiculus mus.</s> donec ullamcorper nulla non metus auctor fringilla.
<!--for inserted text, use tags <ins>-->
<ins>duis mollis, est non commodo luctus</ins>
<!--Add the lead class to the center content to highlight the paragraph-
<p class= "lead" >nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<!--underline text, using tags <u>-->
<u>donec ullamcorper nulla non metus</u>
Auctor fringilla.</p>
<!--can safely use <b> and <i> tags in HTML5. <b> used to highlight words or phrases without any emphasis, while <i> tags are mainly used for speeches, technical vocabulary, etc. -
<b>the following snippet of text is rendered as italicized text.</b><i>the following talicized text.< /i>
</div>
<div>
<!--are aligned with text and can be text-aligned
<p class= "Text-left" >left aligned text.</p>
<p class= "Text-center" >center aligned text.</p>
<p class= "Text-right" >right aligned text.</p>
<p class= "Text-justify" >justified text.</p>
<p class= "Text-nowrap" >no wrap text.</p>
<!--can change the case of text through these classes. -
<p class= "Text-lowercase" >lowercased text. (Make it all lowercase) </p>
<p class= "Text-uppercase" >uppercased text. (Make it all uppercase) </p>
<p class= "Text-capitalize" >capitalized text. (Make each word capitalize on the first letter) </p>
<!--Bootstrap The full content is displayed when the mouse hovers over abbreviations and abbreviations, and Bootstrap implements an enhanced style for the <abbr> elements of HTML. The abbreviation element has the title attribute,
The appearance is shown with a lighter dashed box, which becomes a pointer with a "question mark" when you move the mouse over it. If you want to see the full content you can hover over the abbreviation, but the full content needs to be included in the title attribute. -
<!--Basic language, such as to see the full content can hover the mouse over the abbreviation, but need to set the title property for <abbr> element, the title attribute is the full content of the indented language. -
<abbr title= "Can't see me, can't see me!" ">attr</abbr>
<!--initials, Add. initialism class, can make font-size slightly smaller. -
<ABBR title= "hypertext Markup Language" class= "initialism" >HTML</abbr>
<!--references in bootstrap--
<!--reference content from other sources in your document. -
<!--a reference to a default style to wrap any HTML element in <blockquote> to represent a reference style. For direct references, we recommend using <p> tags. -
<blockquote>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere Erat a ante.</p>
<footer>someone Famous in <cite title= "Source title" >source title</cite></footer>
</blockquote>
<blockquote class= "Blockquote-reverse" >
<p>lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
<footer>someone Famous in <cite title= "Source title" >source title</cite></footer>
</blockquote>
<!--there are sequence tables, order-independent elements that matter--
<ul>
<li></li>
</ul>
<!--a set of elements that are critical to order. -
<ol>
<li></li>
</ol>
<!--no style list removes a set of elements for the default List-style style and left margin (for direct child elements only).
This is for direct child elements, meaning that you need to add this class to all nested lists to have the same style. -
<ul class= "list-unstyled" >
<li></li>
</ul>
<!--inline list, by setting Display:inline-block; and add a small amount of inner complement (padding), placing all the elements has been one line. -
<ul class= "List-inline" >
<li>one</li>
<li>tow</li>
<li>three</li>
</ul>
<!--a list of phrases with descriptions--
<dl>
<dt>description lists</dt>
<dd> A Description list is perfect for defining terms.</dd>
<dt>description lists</dt>
<dd> A Description list is perfect for defining terms.</dd>
<dt>description lists</dt>
<dd> A Description list is perfect for defining terms.</dd>
</dl>
<!--a description of the horizontal arrangement. Dl-horizontal allows you to line up the phrases and their descriptions in <dl>. The start is a default style like <dl> stacked together, arranged in one line as the navigation bar unfolds. -
<DL class= "Dl-horizontal" >
<dt>description lists</dt>
<dd> A Description list is perfect for defining terms.</dd>
<dt>description lists</dt>
<dd> A Description list is perfect for defining terms.</dd>
<dt>description lists</dt>
<dd> A Description list is perfect for defining terms.</dd>
</dl>
<!--automatically truncate through the Text-overflow property, a horizontally arranged list of descriptions will truncate the phrase that is too long on the left. Within a narrower viewport (viewport), the list becomes the default stacking arrangement. -
<dl class= "Text-overflow dl-horizontal" >
<dt>description lists</dt>
<dd> A Description list is perfect for defining terms. A Description list is perfect for defining terms. A
Description list is perfect for defining terms. A Description list is perfect for defining terms. A
Description list is perfect for defining terms. A Description list is perfect for defining terms. A
Description list is perfect for defining terms. A Description list is perfect for defining terms. A
Description list is perfect for defining terms. A Description list is perfect for defining terms.
</dd>
<dt>description lists</dt>
<dd> A Description list is perfect for defining terms.</dd>
</dl>
</div>
<div>
<!--code--
<!--a code snippet that wraps inline styles through a <code> tag. -
For example, <code><section></code> should is wrapped as inline.
<!--mark what users enter through the keyboard through the <kbd> tag. =-->
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
<!--multiple lines of code can use <pre> tags. For the correct presentation of the code, note that the angle brackets are escaped. -
<!--can also use the. Pre-scrollable class to set the Max-height to 350px and to display the scroll bars in the vertical direction. -
<pre class= "Pre-scrollable" ><p> Sample text here...</p></pre>
</div>
<!--table, the basic class of table has. Table: Basic table Style,
. Table table-striped: Through the. Table-striped class, you can add zebra stripes to each line within <tbody>. This feature is not supported by Internet Explorer 8.
. Table table-bordered: Adds a border to the table and each of its cells through the. Table-bordered class.
. Table Table-hover: By adding the. Table-hover class, you can have each row in <tbody> respond to the mouse hover state.
. Table table-condensed: By adding the. Table-condensed class you can make the table more compact, and the inner complement (padding) in the cell is halved.
-
<table class= "Table table-striped" >
</table>
<!--responsive table wraps any. Table element within the. table-responsive element, creating a responsive table that scrolls horizontally on a small screen device (less than 768px). The horizontal scroll bar disappears when the screen is larger than 768px width. -
<div class= "Table-responsive" >
<table class= "Table" >
...
</table>
</div>
<!--bootstrap Forms--
<!--individual form controls are automatically assigned to some global styles. All set up the. Form-control category <input>, <textarea> and <select>
The element is set to the default width property of width:100%; The label element and the previously mentioned control are wrapped in. Form-group to get the best arrangement. -
<div class= "Form-group" >
<label> User name:</label>
<input class= "Form-control"/>
<label> User Password:</label>
<input class= "Form-control"/>
</div>
<!--add the. Form-inline class to the <form> element to make its contents left-aligned and appear as Inline-block-level controls.
Applies only when the viewport (viewport) is at least 768px wide (the viewport width is smaller, it collapses the form).
You need to set the width manually
In Bootstrap, the input box and the Radio/Multi box control are set to width:100% by default; Width.
In the inline form, we set the width of these elements to width:auto, so that multiple controls can be arranged on the same line. Depending on your layout needs, some additional custom components may be required.
Be sure to add a label label
If you do not set a label label for each input control, the screen reader will not recognize it correctly. For these inline forms, you can hide them by setting the. Sr-only class for the label.
-
<div class= "from" >
<form class= "Form-inline" role= "form" >
<div class= "Form-group" >
<label class= "sr-only" for= "ExampleInputEmail2" >email address</label>
<input type= "Email" class= "Form-control" id= "ExampleInputEmail2" placeholder= "Enter Email" >
</div>
<div class= "Form-group" >
<div class= "Input-group" >
<div class= "Input-group-addon" >@</div>
<input class= "Form-control" type= "email" placeholder= "Enter Email" >
</div>
</div>
<div class= "Form-group" >
<label class= "sr-only" for= "ExampleInputPassword2" >Password</label>
<input type= "Password" class= "Form-control" id= "exampleInputPassword2" placeholder= "password" >
</div>
<div class= "checkbox" >
<label>
<input type= "checkbox" > Remember Me
</label>
</div>
<button type= "Submit" class= "btn Btn-default" >sign in</button>
</form>
</div>
</div>
</body>
To be continued ...
Bootstrap CSS Description
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
