How to use bootstrap framework? Introduction to the usage of bootstrap framework

to display the quote style. For direct quotes, it is recommended to use the

tag.

8. List, list-unstyled class removes the default list-style A set of elements with styles and left margins (direct children only). The list-inline class sets display: inline-block; And add a small amount of padding to place all elements on the same line. The dl-horizontal class arranges the phrases and their descriptions within

in one line.

Code:
## tag wraps inline style code snippet

Label marks content entered by the user through the keyboard

 Display code block. The pre-scrollable class can be used to set up to 350px with vertical scrollbar. </p>
<p><br><var> Label tag variable</p>
<p><br><samp> Tag tag content output by the program. </p>
<p><br></p>Table: <p><strong></strong><br>.table class specifies the basic style, </p>
<p><br>.table-striped striped style, </p>
<p><br>.table-bordered class has border style, </p>
<p><br>.table-hover class has mouse hover style, </p>
<p><br>.table-condensed Class compact style. </p>
<p><br>Status class (row or cell setting color): active, success, info, warning, info. </p>
<p><br>Wrap any .table element in a .table-responsive element to create a responsive table, which will scroll horizontally on small screen devices (less than 768px). The horizontal scrollbar disappears when the screen is larger than 768px width.
</p>
<p><strong><br></strong></p>Form: <p><strong></strong><br>1. Basic example: </p>
<p> All settings are .form-control Classes <input>, <textarea> and
<select> elements will have their width attribute set to width: 100%; by default. </p>
<p><br>Wrap the label element and the previously mentioned controls in
The best arrangement can be obtained in .form-group. </p>
<p><br>Do not mix the form group and the input box group directly. It is recommended to nest the input box group into the form group. </p>
<p><br>form-group, input-group, control-group, </p>
<p><br>2. Inline form: </p>
<p><form> element is added.form The -inline class causes its content to be left-aligned and behave as an inline-block level control. Only applies when the viewport is at least 768px wide (any smaller viewport width will cause the form to collapse). </p>
<p></p>
<p>The width of the radio/multi-select box control in the inline form is set to width: auto; <br></p>
<p>If you do not set the label label for each input control, the screen reader will not be able to correctly Identify. For these inline forms, you can hide it by setting the .sr-only class for the label. <br></p>
<p>3. Horizontally arranged forms
: Change the behavior of .form-group by adding the .form-horizontal class to the form so that it behaves like a row in the grid system <br></p>
<p>4, multi-select and radio button
: .radio, .radio-inline, .checkbox, .checkbox-inline. <br></p>
<p>5. Static controls
: In a horizontally laid out form, if you need to place a line of plain text and the label element on the same line, just add the .form-control-static class to the <p> element. <br></p>
<p>6. Control status <br></p>
<p>.disabled class disables controls. When disabled is set to <fieldset>, all included controls are disabled. <br></p>
<p>a tags are not affected by this. The <br></p>
<p>readonly attribute can prevent users from entering the <br></p>
<p>.has-warning, .has-error or .has-success class to the parent element of these controls. Any .control-label, .form-control, and .help-block elements contained within this element will accept the styles for these validation states. <br></p>
<p>You can also add additional icons to the input box for the verification status (note that it depends on the label tag). Just set the corresponding .has-feedback class and add the correct icon. </p>
<p>7. Control size<br></p>
<p>The height can be set for the control through .input-lg .input-sm similar classes, and the control can be set through .col-lg-* similar classes Set width<br></p>
<p>Quickly set the size for label elements and form controls wrapped in .form-horizontal by adding the .form-group-lg or .form-group-sm class. <br></p>
<p>You can easily set the width of the input box or any of its parent elements by wrapping it with a column in the grid system. <br></p>
<p>8. Auxiliary text: help-block class, "block" level auxiliary text for form controls. <br></p>
<p><strong>Buttons: </strong></p>
<p>1. Basic style, btn, btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, active <br></p>
<p>2, display form, btn-link, btn-block, close <br></p>
<p>3, size style, .btn-lg, .btn- sm,.btn-xs. <br></p>
<p>The button class can be applied through the <a>, <button> or <input> elements, but it is recommended to use the <button> element to obtain matching rendering on each browser. Effect. <br></p>
<p><strong>Image: </strong>Image shape, img-rounded, img-circle, img-thumbnail, IE8 does not support the rounded corner attribute in CSS3. <br></p>
<p><strong>Auxiliary: </strong>text-muted, text-primary, text-success, text-info, text-warning, text-danger
, bg-primary, bg-success, bg-info, bg-warning, bg-danger, triangle symbol, caret
, float
, centered
<strong><br></strong></p>
<p><strong>Component style</strong> <br></p>
<p><strong>Icon: </strong> <br></p>
<p>200 A font icon from Glyphicon Halflings. The <br></p>
<p> icon class can only be applied to empty elements and cannot be used in conjunction with other components. <br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><span class="glyphicon glyphicon-search"></span>

Copy after login