Bootstrap basic use [turn]

Bootstrap is an open-source css/html framework (with Sass porting code) introduced by Twitter, written by the dynamic CSS language less. Bootstrap provides a comprehensive set of basic and component styles and comes with 13 jquery plugins (modal dialogs, tabs, scroll bars, pop-ups, etc.) to meet common development needs and to be customized as needed. In addition, Bootstrap provides elegant HTML and CSS specifications that users can refer to for learning. The author of this paper (JAWIDX) introduces bootstrap at the structural level only.

Global style

1. 1

   Some HTML elements and CSS properties are used in Bootstrap to set the page to the HTML5 document type, which is added at the top of the page <! DOCTYPE html> "

2. 2

   Layout container: Bootstrap needs to wrap a. Container or container-fluid (a container that occupies all viewports viewport) for page content and raster systems.

3. 3

   Grid system, Bootstrap provides a set of up to 12 columns of streaming raster systems, with a. row representing rows and. Col-xs-4 This column that represents width quickly creates a raster layout.

4. 4

   Bootstrap layout, link style Sets the basic global style.

   Font-size set to 14px,line-height is set to 1.428.

   The <p> (paragraph) element is also set to the bottom margin (margin) equal to 1/2 rows high (that is, 10px).

   END

Base style

1. "Typesetting",

   1. Title, which can be used to. H1 to the. H6 class assigns the caption style to the text of the inline property, and the caption is tagged with an element in the <small> tag or with the. Small class.

   Main text: the. Lead class lets you highlight paragraphs.

   2. Inline text, use the <mark> tag to denote callout text,<del> delete,<s> useless,<ins> insert,<u> underline,<small> Small (parent container font size 85% ,<strong> focuses on,<em> italic body.

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

   4. Text Case class, text-lowercase,text-uppercase,text-capitalize

   5. Abbreviation class, set the title property 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. Address, rendered in daily use format, add <br> keep the desired style at the end of the line.

   7. References, wrapping HTML elements in <blockquote> can be represented as reference styles. For direct references, <p> tags are recommended.

   8. List, the List-unstyled class removes a set of elements for the default List-style style and left margin (for direct child elements only). List-inline class by setting the Display:inline-block; and add a small amount of inner complement (padding), placing all the elements has been one line. The Dl-horizontal class lets <dl> phrases and their descriptions line up.

3. Code

   <code> tags wrap inline style code snippets,

   <kbd> tags mark what the user has entered through the keyboard,

   <pre> Show code blocks. The Pre-scrollable class can be used to set up to 350px with vertical scroll bars.

   <var> tag Tag variables,

   <samp> tags mark the contents of the program output.

5. Table

   The. Table class specifies the base style,

   . table-striped stripe style,

   The. Table-bordered class is a border style,

   . Table-hover class with mouse hover style,

   . table-condensed class Compact style.

   State Class (row or cell set color): Active,success,info,warning,info.

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

   Responsive table: Scrolls horizontally on a small screen device (less than 768px). The horizontal scroll bar disappears when the screen is larger than 768px width.

6. "Form"

   1. Basic instance, all set up. The <input>, <textarea>, and <select> elements of the Form-control class are 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.

   Do not tell the form group to mix directly with the input box group. It is recommended that you nest the input box groups in the form group.

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

   2. Inline form,<form> element Add. The Form-inline class allows its content to be left-aligned and behaves as a inline-block-level control. Applies only when the viewport (viewport) is at least 768px wide (the viewport width is smaller, it collapses the form).

   The width of the radio/Multi box control in the inline form is set to Width:auto;

   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.

   3. Horizontal arrangement of forms

   By adding the. Form-horizontal class to the form, change the behavior of the. Form-group so that it behaves as a row in the grid system (ROW)

   4. Multi-Select and single box

   . Radio,. Radio-inline,. CheckBox,. Checkbox-inline.

   5. Static controls

   Horizontal layout of the form, if you want to place a line of plain text and a LABEL element has been one line, add to the <p> element. Form-control-static class.

   6. Control state

   The. Disabled class disables the control, and all contained controls are disabled when you set disabled for <fieldset>.

   A label is not affected by this type of effect.

   The ReadOnly property can prevent users from entering

   . has-warning,. Has-error, or. has-success classes to the parent element of these controls. Any. Control-label,. Form-control, and. Help-block elements that are contained within this element will accept the style of these checksum states.

   You can also add extra icons for the check status to the input box (note that the label label is dependent). Simply set the appropriate. Has-feedback class and add the correct icon.

   7. Control Dimensions

   A class similar to the. Input-lg. INPUT-SM can set the height of a control by using a. col-lg-* similar class to set the width of the control

   Quickly set dimensions for. Form-horizontal wrapped label elements and form controls by adding the. Form-group-lg or. Form-group-sm class.

   Wrapping the input box or any of its parent elements with a column in a raster system makes it easy to set the width.

   8. Auxiliary text

   The Help-block class, block-level auxiliary text for form controls.

8. button

   1. Basic styles, BTN, Btn-default, Btn-primary, btn-success, Btn-info, btn-warning, Btn-danger, active

   2. Presentation form, Btn-link, Btn-block, close

   3. Dimension style,. BTN-LG,. Btn-sm,. Btn-xs.

   button classes can be applied through the <a>, <button>, or <input> elements, but it is recommended that <button> elements be used to obtain a matching drawing effect on each browser.

10. Picture

    Picture shape, IMG-ROUNDED,IMG-CIRCLE,IMG-THUMBNAIL,IE8 does not support fillet properties in CSS3.

11. Secondary

    text-muted, Text-primary, text-success, Text-info, text-warning, Text-danger

    Bg-primary, Bg-success, Bg-info, bg-warning, Bg-danger,

    Triangular symbol, caret

    Floating

    Center

    Component styles
    2. Icon

       200 font icons from Glyphicon halflings,

       The icon class can only be applied to empty elements and cannot be used in conjunction with other components.

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

    4. Menu

       Drop-down menu triggers and drop-down menus are wrapped in. Dropdown

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

       Menu grouping: Dropdown-header table description items,. Disabled table Disabled Items

       Eject up: the. Dropup class enables the triggering drop-down menu to open upwards

    6. "Button Group"

       Button group. Btn-group, through. btn-group-* Specifies the button size in the group.

       Button Bar. Btn-toolbar

       Vertical Stacking Display Btn-group-vertical

       Align the aligned button groups Btn-group-justified

    8. Navigation

       tab. The Nav-tabs class relies on the. Nav base class.

       Capsule label page. Nav-pills class, Add. nav-stacked class to vertical stacking.

       The. Nav-justified class makes it easy to make tabs or capsule labels appear equal in width.

       NavBar Navbar-default

       For <button> elements not included in <form>, plus. NAVBAR-BTN, you can have it vertically centered in the navigation bar.

       Placing the form in a. Navbar-form can render good vertical alignment,

       . navbar-text

       . navbar-link

       The. Navbar-left and. Navbar-right Tool classes Align navigation links, forms, buttons, or text.

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

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

       The. Navbar-static-top class allows the navigation bar to disappear as the page scrolls down.

       The. Navbar-inverse class can change the appearance of the navigation bar.

       Breadcrumb creates a hierarchical navigation structure (breadcrumbs).

    10. "Paging"

        pagination, and use the. Disabled class,. Active class, as appropriate.

        The. Pagination-lg or. Pagination-sm class provides additional dimensions to choose from.

        Pager A simple page turn on the previous and next pages. And can be marked by the Previous,next class.

    12. Label

        Label label base class, can change the appearance of the label through Label-default, Label-primary, label-success, Label-info, label-warning, Label-danger.

        Badge, you can display new or unread information items with great visibility.

    14. Other

        Thumbnail images

        Prompt box

        Progress bar

        Media objects, etc.

        Custom styles
        1. 1

           Bootstrap provides customized components and jquery plugins to suit your needs, and users can modify less source directly.

           END
        Summarize
        1. 1

           This experience only from the overall simple introduction of bootstrap content, the details are not specific, the use of bootstrap is very flexible, can be used to combine various components (such as: Add a drop-down menu for tab items), it is recommended to use the process of real-time reference to the official documents, Official documents have more detailed download and use instructions, there are visual examples of specific styles, and there are a wealth of theme cases.

           Transferred from: http://jingyan.baidu.com/article/624e7459ad0bed34e8ba5a13.html

Bootstrap basic use [turn]