(1) The CSS for responsive web design
adds the following line of code to the head area of the web page: <meta name="viewport" content="width=device-width, initial-scale=1.0">
① The meta element of the viewport label, which loads styles related to a specific viewport.
②width property sets the screen width. It contains a value, such as 320, which means 320 pixels, or a value of 'device-width', which tells the browser to use the native resolution.
③The initial-scale property is the initial scale of the viewport. When set to 1.0, the original width of the device is rendered.
By looking for responsive CSS files, behind many public declarations, there are various areas starting with '@media' (media query technique). This is how to write styles for various devices.
Once a page is loaded on a specific device using various fonts and web development techniques such as Media Queries, the device's viewport size is detected and device-specific styles are loaded.
(2) Typesetting
uses the Bootstrap toolkit to create headings, paragraphs, lists and other inline elements
(3) Code
Bootstrap allows two ways to display code:
the first <code> tag. If you want to display the code inline, you should use the <code> tag.
The second <pre> tag. If the code needs to be displayed as a single block element or the code has multiple lines, the <pre> tag should be used.
Make sure that when you use <pre> and <code> tags, start and end tags use the unicode variant: < and >.
(4) Forms
①Basic forms
For basic tables with only padding and horizontal division, please add class .table ②Striped
table, border table, hover table, compact table, contextual table
③Responsive table: wrap any .table in Within the .table-responsive class, you can make the table scroll horizontally for small devices (less than 768px). You won't see any difference when viewing on larger devices than 768px wide.
Example:
<div class="table-responsive">(table responsive)
<table class="table">
<caption>responsive table layout</caption>(description or summary of table storage content)
</table>
< /div>
(5) Form
form layout: vertical form, inline form, horizontal form
(6) Button tags
can use button class on <a>, <button> or <input> elements. However, it is recommended that you use the button class on the <button> element to avoid cross-browser inconsistencies
<a class="btn btn-default" href="#" role="button">link</a>
<button class ="btn btn-default" type="submit">button</button>
<input class="btn btn-default" type="submit" value="submit">
(7) Pictures
① Bootstrap provides three classes that can apply simple styles to pictures:
.img-rounded: add border-radius: 6px to get image rounded corners.
.img-rounded{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}
.img-circle: Add border-radius:50% to make the whole image round.
.img-thumbnail: Adds some padding and a grey border.
② The <img> tag adds the .img-responsive (image responsive) class to make the image support responsive design, and the image will extend well to the parent element.
The .img-responsive class applies max-width: 100%; and height: auto; styles to images:
Example: <img src="background.jpg" class="img-responsive" alt="Cinque Terre">
( 8) Auxiliary classes:
text, background, float, clear float, show hide, close button, insert, screen reader
(9) Responsive utilities:
Bootstrap provides some auxiliary classes for faster mobile friendly development. These can be combined with large, small, and medium-sized devices through media queries, enabling content to be shown and hidden from device to device.
Note: These tools need to be used with care to avoid creating completely different versions of the same site. Responsive utilities are currently only available for block and table switching.
Example: http://www.runoob.com/try/try2.php?filename=bootstrap3-resonsive-utilies
Note when using Bootstrap layout components
: For property definitions, make sure to use double quotes, never single quotes.
Adaptive: 768--992--1200 pixels
① Font icon
② Drop-down menu
③ Button group
④ Button drop-down/pull-up menu
⑤ Input box group: size, button group with drop-down box, split drop-down menu button
⑥ Navigation element: Tags with drop-down menus The <nav> tag is a new tag in HTML 5, which defines the part of the navigation link
⑦ Navigation bar and Breadcrumbs: fixed at the bottom of the header, or scrolling with the page
⑧ Thumbnail
⑨ Panel: Panel Header, Panel Footer, Panel with Context Color, Panel with List Group
Bootstrap Plugins
All plugins depend on jQuery. Therefore, jQuery must be referenced before the plugin file ①scroll
monitoring
②folding, carousel