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

Bootstrap is one of the most popular front-end frameworks from Twitter. The Bootstrap framework is based on HTML, CSS, and javascript. It is simple and flexible, making Web development faster, but many friends don’t know How to use the bootstrap framework, the following article will introduce to you how to use the bootstrap framework.

Without further ado, let’s go straight to the text~ (Free course recommendation: bootstrap tutorial)

##1 , some HTML elements and CSS attributes used in Bootstrap need to set the page to the HTML5 document type, that is, add "8b05045a5be5764f313ed5b9168a17e6" at the top of the page

2 . Layout container: Bootstrap needs to wrap a .container or container-fluid (container that occupies the entire viewport) container for the page content and grid system.

3 Grid system: Bootstrap provides a fluid grid system with up to 12 columns. You can quickly create a grid layout through .row representing rows and .col-xs-4, a column representing width.

4 , Bootstrap typography, and link styles set basic global styles.

font-size is set to 14px and line-height is set to 1.428.

e388a4556c0f65e1904146cc1a846bee The (paragraph) element is also set with a bottom margin equal to 1/2 the line height (i.e. 10px).

Basic style

Typesetting:

1. Title, can be used for .h1 to .h6 categories The text of the associated attribute is given a title style, and the subtitle is marked within the title through the d015d241ae6d34c34210679b5204fe85 tag or an element with the .small class.

Body text: The .lead class allows paragraphs to be highlighted.

2. Inline text, use f920514e6447cf1d171079d1371f007f The label represents the annotation text, 823db3943044a0a9a620ada8d4b1d965delete, 2e44d2d3284d23d932e1fd85f3d4cf3auseless, 426be984ffbbb815d7d88e3543a85d91insert, 88f336217b3880082bb52d49b5de60a5underline, d015d241ae6d34c34210679b5204fe85small (the font size of the parent container 85%), 8e99a69fbe029cd4e2b854e244eab143emphasis, 907fae80ddef53131f3292ee4f81644bitalics.

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 attribute for the 8a7974376be5f6c00c121222b727adb9 element and use the .initialism class to set the font-size become slightly smaller. Example: 3d9b10a8a4853b7790248fb60477a8e3attr4f2d06a7b2d26e0ad682bc6a608fa811

6. The address is presented in the format for daily use. Just add 0c6dc11e160d3b678d68754cc175188a at the end of the line to retain the required style.

7. Quote, wrap the HTML element in b8a712a75cab9a5aded02f74998372b4 to display the quote style. For direct quotes, it is recommended to use the e388a4556c0f65e1904146cc1a846bee 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 5c69336ffbc20d23018e48b396cdd57a in one line.

Code:
##ffbe95d20f3893062224282accb13e8f tag wraps inline style code snippet

5e4e803d53d659f332070b5d4aa430db Label marks content entered by the user through the keyboard

e03b848252eb9375d56be284e690e873 Display code block. The pre-scrollable class can be used to set up to 350px with vertical scrollbar.

b7f90f73cad438258bf67e62f79b2113 Label tag variable

162cd570ab1483e383d78dcb7f452f7c Tag tag content output by the program.

Table:

.table class specifies the basic style,

.table-striped striped style,

.table-bordered class has border style,

.table-hover class has mouse hover style,

.table-condensed Class compact style.

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

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.

Form:

1. Basic example:

All settings are .form-control Classes d5fd7aea971a85678ba271703566ebfd, 4750256ae76b6b9d804861d8f69e79d3 and 221f08282418e2996498697df914ce4e elements will have their width attribute set to width: 100%; by default.

Wrap the label element and the previously mentioned controls in The best arrangement can be obtained in .form-group.

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.

form-group, input-group, control-group,

2. Inline form:

ff9c23ada1bcecdd1a0fb5d5a0f18437 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).

The width of the radio/multi-select box control in the inline form is set to width: auto;

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.

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

4, multi-select and radio button : .radio, .radio-inline, .checkbox, .checkbox-inline.

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 e388a4556c0f65e1904146cc1a846bee element.

6. Control status

.disabled class disables controls. When disabled is set to 2b5469ab79cf842344327415c3b3bb95, all included controls are disabled.

a tags are not affected by this. The

readonly attribute can prevent users from entering the

.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.

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.

7. Control size

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

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.

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.

8. Auxiliary text: help-block class, "block" level auxiliary text for form controls.

Buttons:

1. Basic style, btn, btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, active

2, display form, btn-link, btn-block, close

3, size style, .btn-lg, .btn- sm,.btn-xs.

The button class can be applied through the 3499910bf9dac5ae3c52d5ede7383485, bb9345e55eb71822850ff156dfde57c8 or d5fd7aea971a85678ba271703566ebfd elements, but it is recommended to use the bb9345e55eb71822850ff156dfde57c8 element to obtain matching rendering on each browser. Effect.

Image: Image shape, img-rounded, img-circle, img-thumbnail, IE8 does not support the rounded corner attribute in CSS3.

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 , float , centered

Component style

Icon:

200 A font icon 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>

Menu:

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

Menu alignment: By default, dropdown menus are automatically positioned at 100% width along the top and left edges of the parent element. Adding the .dropdown-menu-right class to .dropdown-menu allows the menu to be right-aligned

Menu grouping: dropdown-header table description items, .disabled table disabled items

Pop up: The .dropup class can make the triggered drop-down menu open upwards

Button group :

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

Button bar.btn-toolbar

Buttons are stacked vertically to display btn-group-vertical

Button groups aligned on both ends btn-group-justified

Navigation:

Tabs.nav-tabs class depends on .nav base class.

Capsule tab page .nav-pills class, add .nav-stacked class to change it to vertical stacking.

The .nav-justified class makes it easy to make tabs or capsules the same width.

navbar navbar-default

For the bb9345e55eb71822850ff156dfde57c8 element that is not included in ff9c23ada1bcecdd1a0fb5d5a0f18437, after adding .navbar-btn, you can make it Center the navigation bar vertically.

Placing the form within .navbar-form can provide good vertical alignment,

.navbar-text

. navbar-link

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

.navbar-fixed-top class allows the navigation bar to be fixed at the top

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

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

.navbar-inverse class can change the appearance of the navigation bar.

breadcrumb Creates a hierarchical navigation structure (breadcrumbs).

Page:

pagination, and use the .disabled class and the .active class for the page number according to the situation.

The .pagination-lg or .pagination-sm classes provide additional sizes to choose from.

pagerSimple page turning to the previous and next pages. And can be marked by previous and next classes.

Label: label label base class, the label can be changed through label-default, label-primary, label-success, label-info, label-warning, label-danger Exterior.
badge, which can display new or unread information items very conspicuously.

Others: Thumbnails , prompt box ,progress bar , media objects, etc.

Customized style

BootStrap provides components and jquery plug-ins for customization according to their own needs. Users can also directly modify the Less source code.

The above is the detailed content of How to use bootstrap framework? Introduction to the usage of bootstrap framework. For more information, please follow other related articles on the PHP Chinese website!