Basic use of Bootstrap

Bootstrap is an open-source CSS/html framework launched by Twitter, which is written by the dynamic CSS language less (SASS porting code is also provided ). Bootstrap provides comprehensive basic and component styles and comes with 13 jquery plug-ins (modal dialog box, tab, scroll bar, and pop-up box) to meet common development needs, it is also customized as needed. In addition, bootstrap provides elegant HTML and CSS specifications. You can also learn from them. The author of this article (jawidx) only introduces Bootstrap at the structural layer.

Tools/Raw Materials

• Bootstrap

Global Style

1. 1

   To use HTML elements and CSS attributes in Bootstrap, you need to set the page to HTML5 document type, that is, add "<! Doctype HTML>"

2. 2

   Layout container: Bootstrap needs to wrap a. iner or container-fluid container for the page content and raster system (the container that occupies all the viewports of the view.

3. 3

   In the raster system, bootstrap provides a set of streaming raster systems with up to 12 columns, allowing you to quickly create a raster layout using columns that represent rows and. col-xs-4 in width.

    

4. 4

   Bootstrap typographical and link styles are used to set basic global styles.

   Set Font-size to 14px and line-height to 1.428.

   <P> the (paragraph) element is also set to the bottom margin (margin) equal to the height of 1/2 rows (that is, 10 px ).

   End

Basic Style

1. 1

   [Layout ],

   1. title, which can be used to assign title styles to the text of inline attributes from. H1 to. H6. The title is marked with a <small> label or an element with the. Small class.

   Subject text: The. Lead class highlights the section.

   2. inline text. The <mark> label is used to indicate the text, <del> Delete, <S> useless, <ins> insert, <u> underline, <small> small (85% of the font size of the parent container), <strong> emphasis, <em> italic.

   3. Text alignment class, text-left, text-center, text-right, text-justify, text-nowrap

   4. Text case, text-lowercase, text-uppercase, text-capitalize

   5. Abbreviations: Set the title attribute for the <abbr> element and use the. initialism class to make the font-size slightly smaller. Example: <abbr Title = "attribute" class = "initialism"> ATTR </abbr>

   6. The address is displayed in the format of daily use. Add <br> at the end of the row to retain the desired style.

   7. Reference: Wrap the HTML element in <BLOCKQUOTE> to show the reference style. For direct reference, we recommend that you use the <p> label.

   8. List, list-unstyled class removes a group of elements of the default list-Style and left margin (only for direct sub-elements ). The list-inline class places all elements in the same row by setting display: inline-block and adding a small number of inner pads. The DL-horizontal class ranks the phrases and descriptions in <DL> in a row.

2. 2

   [Code]

   <Code> label packages inline style code snippets,

   <KBD> tag indicates the content entered by the user through the keyboard,

   <PRE> display the code block. You can use the pre-scrollable class to set up to 350px with a vertical scroll bar.

   <Var> tag variable,

   <SAMP> tag the output content of the program.

3. 3

   Table]

   The. Table class specifies the basic style,

   . Table-striped style,

   . The table-bordered class is a border style,

   . Table-Hover class with mouse hover style,

   . Table-condensed compact style.

   Status class (set the row or cell color): active, success, info, warning, info.

    

   Wrap any. Table element in the. Table-responsive element to create a responsive table.

   Response Table: Scroll horizontally on a small screen device (less than 768px. When the screen width is greater than 768px, the horizontal scroll bar disappears.

4. 4

   Form]

   1. for basic instances, all the <input>, <textarea>, and <SELECT> elements of the. Form-control class are set to width: 100% by default ;. Wrap the label element and the previously mentioned controls in. Form-group for the best arrangement.

    

   Do not mix form groups with input box groups. We recommend that you nest the input box group in the form group.

   Form-group, input-group, control-group,

    

   2. inline form. Add the. Form-inline class to the <form> element to align its content left and display it as an inline-block control. It is only applicable when the viewport is at least PX width (the form is folded if the width of the view is smaller ).

   In the inline form, set the width of the single-choice/Multi-choice box control to width: auto;

   If you do not set a label Label for each input control, the screen reader will not be able to recognize it correctly. For these inline forms, you can hide them by setting. Sr-only for the label class.

   3. Horizontally arranged forms

   Add the. Form-horizontal class to the form to change the. Form-group behavior so that it is represented by rows in the raster system)

   4. Multi-choice and single-Choice

   . Radio,. Radio-inline,. checkbox,. checkbox-inline.

   5. Static controls

   In a horizontal layout form, to place a line of plain text and label elements in the same row, add the. Form-control-static class to the <p> element.

   6. control status

   The. Disabled class disables the controls that are included when <fieldset> is set to disabled.

   Label A is not affected.

   The readonly attribute disables user input.

   The. Has-warning,. Has-error, and. Has-success classes can be used to parent elements of these controls. Any. Control-label,. Form-control, and. Help-block elements contained in this element will accept these validation status styles.

   You can also add additional icons to the input box for the check status (note that the label Label is dependent on ). You only need to set the corresponding. Has-feedback class and add the correct icon.

   7. widget size

   You can use a class similar to. Input-LG. Input-Sm to set the height of the control. You can use a class similar to. col-LG-* To set the width of the control.

   By adding the. Form-group-LG or. Form-group-Sm class, you can quickly set the size for the label element and form control of the. Form-horizontal package.

   You can easily set the width of an input box or any of its parent elements by wrapping the column in The raster system.

   8. Auxiliary text

   The help-block class is used for the "block" level auxiliary text of Form Controls.

5. 5

   Button]

   1. Basic style: BTN, BTN-default, BTN-primary, BTN-success, BTN-Info, BTN-warning, BTN-danger, and active

   2. Display format: BTN-link, BTN-block, and close

   3. size style,. BTN-LG,. BTN-Sm,. BTN-Xs.

   You can use the <A>, <button>, or <input> element to apply the button class. However, we recommend that you use the <button> element to obtain matching rendering results in various browsers.

6. 6

   [Picture]

   Image shape: IMG-rounded, IMG-circle, IMG-thumbnail, and IE8 do not support corner attributes in css3.

7. 7

   Auxiliary]

   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

   Floating

   Center

   End

Component Style

1. 1

    

   [Icon]

   200 font icons from glyphicon Halflings,

   The icon class can only be applied to null elements and cannot be used together with other components.

   <SPAN class = "glyphicon-search"> </span>

    

2. 2

   Menu]

   Wrap the drop-down menu trigger and drop-down menu in. dropdown

   Menu alignment: by default, the drop-down menu is automatically positioned as 100% in width along the top and left of the parent element. Add the. dropdown-menu class to the. dropdown-menu-right class to align the menu right.

   Menu group: dropdown-header table description,. Disabled table disabled

   Up: The. dropup class enables the trigger drop-down menu to open above.

    

3. 3

   Button Group]

   Button group. BTN-group: Specify the button size in the Group through. BTN-group.

   Button bar. BTN-Toolbar

   Vertical stacked display of Button BTN-group-vertical

   Button group BTN-group-justified

    

    

    

4. 4

   [Navigation]

   Tab. Nav-Tabs class dependency. Nav base class.

   Capsule tab. Nav-pills class, Add. Nav-stacked class to vertical stack.

   The. Nav-justified class can easily make tabs or capsule labels show the same width.

   Navbar-Default

    

   If the <button> element not included in <form> is added with. navbar-BTN, it can be vertically centered in the navigation bar.

   Placing the form in. navbar-form can display a good vertical alignment,

   . Navbar-Text

   . Navbar-Link

   The. navbar-left and. navbar-right tool classes align navigation links, forms, buttons, or text.

   . Navbar-fixed-top class allows the navigation bar to be fixed to the top

   . Navbar-fixed-bottom class allows the navigation bar to be fixed at the bottom

   . Navbar-static-top class can make the navigation bar disappear as the page scrolls down.

   The. navbar-inverse Class can change the appearance of the navigation bar.

   Breadcrumb creates a hierarchical navigation structure (breadcrumb ).

5. 5

    

   [Pagination]

   Pagination, and use the. Disabled class and. Active class for the page number.

   The. pagination-LG or. pagination-Sm class provides an extra available size.

   Simple paging of pager previous and next pages. And can be identified by previous and next classes.

    

    

    

    

6. 6

   [Tag]

   Label Label base class. You can use label-default, label-primary, label-success, label-Info, label-warning, and label-danger to change the label appearance.

   Badge, which can display new or unread entries.

    

7. 7

   [Others]

   Thumbnail

   Prompt box

   Progress bar

   Media objects

    

   End

Custom Style

1. 1

   Bootstrap provides custom components and jquery plug-ins based on your needs. You can also directly modify the less source code.

   End

Summary

1.  

   This article briefly introduces Bootstrap content from the global perspective. The details are not specific. Bootstrap is flexible to use and can be used together with various components (for example: add a drop-down menu for tab items). We recommend that you refer to the official documentation in real time during use. The official documentation provides more detailed download and usage instructions, and provides an intuitive example for specific styles, there are also a wide range of theme cases.

Basic use of Bootstrap