Shulou(Shulou.com)06/01 Report--

This article introduces you how to deeply understand bootstrap, the content is very detailed, interested friends can refer to, hope to be helpful to you.

I. preparation for entry

II. Overall structure

a. Overall architecture

1.CSS12 grid system: using regular grid array to guide and standardize the existing layout and information distribution in web pages.

two。 Basic layout components, such as typesetting, code, tables, buttons, forms, etc., can be applied to any element, including the CSS component at the top, or these basic components can be used at will

3.jQuery

4. Responsive design: page design and development should be responsive and adjusted according to user behavior and device environment (system platform, screen size, screen orientation, etc.), including elastic grid and layout, pictures, use of CSS media query (media query), etc.

5.CSS component

6.JavaScript plug-in

b. Grid system

1. Column offset: columns can be offset to the right using a style in the form of .col-md-offset-*

two。 Column nesting: declare one or more rows (row) in a column. The width of the inner nested row is the width of the current outer column when the width is 100%.

3. Column sorting: implemented by .col-md-push-* and .col-md-pull-*

4. Responsive grid: medium screen md, ultra-small xs, small sm, large lg

5. Clear floats using clearfix

Design idea of C.CSS component Architecture

1.CSS component AO pattern: a means Append, which means "attach", and O means Overwrite, that is, "rewrite"

2.CSS components include: base style, color style, dimension style, state style, special element style, side-by-side element style, nested sub-element style, animation style.

D.JavaScript plug-in architecture

1.HTML layout rules: layout rules based on element custom attributes, such as using custom attributes similar to data-target, etc.

2.JavaScrtip implementation steps: all plug-ins follow the standard steps of jQuery plug-in development, and all events maintain a unified standard

3. Plug-in invocation method: all plug-ins are used in a very similar manner, either HTML declarative or callback (JavaScript code), and support multiple callbacks and optional parameters

III. CSS layout

a. Overview

1. Move: add user-scalable=no to disable its zooming function

two。 Responsive picture: .img-responsive style

3.Normalize.css, a CSS library used to set the default CSS feature of different browsers to uniform effect

4. Center container: .container

b. Basic typesetting

1. Style h2-6 does not have margin,h2, h2. Small shows a slightly smaller font, gray.

two。

There are extra margin-bottom

3. Instead of highlighting a paragraph, you can use the .lead style to increase font size, weight, line spacing, and margin-bottom

4. Default emphasis text: small, strong, em, cite

5. Alignment: text-left, text-center, text-right, text-justify

6. The acronym function is implemented on the abbr element, and initialism can make the font smaller.

7.address elements are mainly line spacing and bottom margin

8.blockquote defines styles, and you can define. Pull-right

9. List: go point list. List-unstyled; inline list. List-inline; horizontal definition list. Dl-horizontal

c. Code

1.code radio inline code, kbd user input code, pre multi-line code block

Application on 2.pre element. Pre-scrollable can control the maximum height to be 340px and scroll

d. Form

1. Base style: .table

two。 Interlaced plus background color style: .table-striped

3. Cells with borders: .table-bordered

4. Mouse over highlighted table: .table-hover

5. Compact form: .table-condensed

6. Row-level element styles, which can be used on tr and td:

.active represents information about the current activity

.warn indicates a warning

Success indicates success or correct behavior

.mistake indicates dangerous or possibly wrong behavior

.info indicates neutral information or behavior.

7. Responsive tables can be created by wrapping .table-responsive style div around .table and scrolling horizontally when it is less than 768px

e. Form

1. Basic form: only the fieldset, legend and label tags in the form are set, and margin, padding and border are refined. If the .form-control style is applied to the select, input and textarea elements, the width of the display will become 100%, and the color of the placeholder will turn gray.

two。 Inline forms: apply the. form-inline style to form elements, which can only be greater than 768px

3.label wraps radio or checkbox and uses .checkbox or .radio style externally. Label can use .checkbox-inline or .radio-inline inline style.

If the disabled property is applied to the 4.fieldset, all internal controls are disabled, except for the controls in the first legend

5. Verify the prompt status: .has-warning, .has-error, .has-success, apply to form-group flat div elements

6. Corresponding small icon: has-feedback

7. Control size: .input-lg, .input-sm

8. Block-level help tips: .help-block

f. Push button

1. Press twist style: .btn, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-link

two。 Button size: .btn-lg, .btn-sm, .btn-xs, .btn-block

3. Can support: a, button, input elements

4. Activity status: .active

5. Disabled state: disabled property or .button style, which does not prohibit the default behavior of buttons

g. Image

1.3style effects: .img-rounded, .img-circle, img-thumbnail

h. Auxiliary style

1. Text style: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger

two。 Text background style: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger

3. Auxiliary icons: .close close icon, .caret down arrow

4. Content float: .pull-right, pull-left, center-block, clearfix

5. Hide and show: .show, .hidden (do not occupy the document stream), .invisible

IV. CSS components

a. Small icon

1. All icon styles begin with glyphicon- and are provided by http://glyphicons.com/. You must use both styles, .glyphicon and .glyphicon-*.

two。 The new version uses the @ font-face feature in CSS3

b. Drop-down menu

c. Button group

1. You only need to use a window element (such as div) outside of multiple buttons, and then apply the. btn-group style to the container element

two。 Press the toolbar, place a large container element outside the multiple groups, and then apply the. btn-toolbar style to the container element

3. .btn-group-lg, .btn-group-sm, .btn-group-xs styles can be applied to the press-torsion group.

4. Vertical grouping uses the .btn-group-vertical style

5. On a .btn-group container, if the .btn-group-justified style is used, all the buttons will be 100% full of container elements, adaptive

d. Button drop-down menu

1. Using data-toggle= "" to realize the drop-down menu

two。 Style .dropup up drop-down menu

e. Input box group

1. Input box group, .input-group style, personality elements displayed before and after the input box can be used .input-group-addon

two。 Avoid using the addon function on select elements, and do not mix. Form-group with .input-group

f. Navigation

1. Use .nav:

.nav-tabs represents tab navigation

.nav-pills capsule tab navigation

.nav-pills .nav-stacked stackable navigation

two。 Adaptive navigation using .nav-justified

g. Navigation bar

1. Use style: .navbar

. navbar-default basic navigation bar

.navbar-inverse inverse navigation bar

two。 Use the. navbar-brand style to give an internal element, indicating that it is the name of the navigation bar

3. To enhance accessibility, add role= "navigation" to each navigation bar

4. Style. recognition style in the navbar-form navigation bar, specifying floats: .navbar-left and .navbar-right

5. Other styles: .navbar-btn (button), .navbar-text (text), .navbar-link (normal link)

6. Fixed bottom and top: .navbar-fixed-top, .navbar-fixed-bottom

7. Style .navbar-static-top, which means to set a navigation bar that is 100% full of the parent element window, mainly to remove the fillet style of the navigation bar

h. Bread crumb navigation

Use style: .breadcrumb

i. Paging navigation

1. Use style: .pagination

two。 Support sizes: .pagination-lg and .pagination-sm

j. Label

1. Use style: .label

two。 Supports multiple colors, similar to button

k. badge

Use style: .badge

l. Large screen broadcast

Use style: .jumbotron

m. Page title

Use style: .page-header

n. Thumbnail image

1. Use style: .thumbnail

two。 Style: .caption, which can be displayed with graphics and text, and any style element can be added inside this style element.

o. Warning box

1. Use style: .alert

two。 Attribute value data-dismiss= "alert". If the warning box is closed, it needs to be used with js.

3. Apply a .alert-dismissable style to the .alert style to achieve a closed warning box

4. Warning boxes also come in a variety of color styles

5. Use the link in the. alert-link style to highlight the warning box

p. Progress bar

1. Style .progress is used to set the container style of the progress bar.

two。 Style .progress-bar is used to limit the progress of the progress bar

3. Style .progress-bar-xxx, provide Xin color

4. Style .progress-striped stripe style, while applying .active animation style

5. Multiple .progress-bar-xxx can be stacked

q. Media object

Use styles include: .media, .media-object, .media-body, .media-heading and pull-left or pull-right styles used to control the left and right floats

r. List group

1. Basic style: .list-group, .list-group-item

two。 Use a tag with .active style to achieve the effect of highlighting selection.

3. Style .list-group-item-xxx supports multiple colors

4. Custom list groups: .list-group-item-heading, .list-group-item-text

s. Panel

1. Basic panel: .panel, .panel-default (.panel-xxx colorful), panel-body

two。 Head-tail style: .panel-heading, .panel-footer

3.panel-body has an inner margin. To place a borderless table, just put table and panel-body side by side, not in body.

t. Depressions

1. The style .well is similar to .jumbotron with more borders.

two。 Size settings are also available: .well-lg, .well-sm

u. Theme

5. JavaScript plug-in

a. Excessive animation effect

1. By default, the following components use animated transitions:

Sliding and gradient effects of Modal pop-up window (Modal)

The gradient effect of the tab (Tab)

Gradient effect of warning box (Alert)

The sliding effect of rotary wheel seeding (Carousel)

b. Modal pop window

1. The pop-up window component uses three layers of div container elements, with modal, modal-dialog and modal-content styles applied respectively, and the modal-content includes the header, body and footer of the pop-up window, corresponding to three styles: modal-header, modal-body and modal-footer

two。 Declarative usage: data-toogle= and data-target=

3.js usage: $('# id') .modal ()

4. Four event subscriptions are supported: show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal

c. Drop-down menu

1. Generally implemented on navigation bars (navbar) and tabs (tab)

two。 First, apply the .navbar style to the parent container of the navbar, and then apply the .nav and .navbar-nav styles to the top-level ul block.

3. Usage rules:

Menu styles are consistent with menu items

Data-toggle= "dropdown" needs to be applied to the clicked link or button.

4.js usage: $('# id') .dropdown ();, which also includes features such as event subscription, similar to modal

d. Rolling detection

1. The roll detection (ScrollSpy) plug-in automatically updates the corresponding navigation items in the navigation bar according to the scrolling position.

two。 Usage:

Set the scrolling container, that is, set the data-target= "@ selector" data-spy= "scroll" attribute on the element to be detected

Set menu link container, set id or style consistent with data-target

In the menu container, there must be a .nav-style element and a li element inside it. Only the an element in li can detect highlighted menu links, that is, it meets the selector condition of .nav li > a.

3.js usage: $('scroll detection container selector'). Scrollspy ({target:'# the selector of a single container'})

e. Tabs

1. Meet the requirements:

Tab navigation and tab panel should have both

Set data-toggle= "tab" in the navigation link, and also set data-target= "selector" or href= "selector"

Tab-pane should be put in tab-content, have id or style and be consistent with data-target or href

f. Prompt box

1. There is no declarative use by default

2. DataMutual toggle = "tooltip"

g. Pop-up box

Similar to the prompt box, data-toggle= "popover"

h. Warning box plug-in

1. Dismiss= "alert" is required to close the button. With data-target= "xxx", it can be turned off externally.

2.JS usage: $(xxx) .alert () or $(xxx) .alert ('close')

i. Push button

Ordinary button uses data-toggle= "button", while input requires data-toggle= "buttons"

j. Folding

1. Data collapse toggle = "collapse" is used with data-target= "". The folding area is in collapse and in style.

two。 Hide the collapse region by default, add a .collapsed style to the trigger element, and remove the in style from the collapse area.

3.JS usage: $(xxx). Collapse ()

k. Rotary rotation sowing

l. Automatic positioning buoy

The effect of 1.Affix is a floating left and right menu.

two。 Use data-spy= "affix", including affix-top, affix-bottom, with data-offset

VI. Actual combat: expanding existing components

VII. Actual combat: the development of Win8 tile components

IX. Third-party expansion

1.Font Awesome,.icon-xxx related Styles

2.BSIE extension that supports browsers below IE8

3.Buttons extension, CSS twist style library based on Sass and Compass

4.DateTime Picker plug-in

5.Cikonss, a responsive Icon plug-in implemented by pure CSS, compatible with IE8+

6.Flat UI, flattening style transformation based on Bootstrap

7.Bootstrap Switch, used to simulate the effect of iPhone switch

8.Messager, alert component

On how to in-depth understanding of bootstrap to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.