Bootstrap Study record (MU course net tutorial)

1. Small can be nested in H when subtitle is required under the main heading

2, when a paragraph needs to be highlighted can add lead class, its role is to increase the text size, bold text, and the line height and margin also do the corresponding processing class= "lead"

3, in ordinary elements we generally through the font-weight set to bold keyword to the text bold. In bootstrap, you can use the <b> and <strong> tags to make text bold directly.

4, italic similar to bold, in addition to the element can be set style Font-style value for the italic implementation, in Bootstrap can also be achieved by using the label <em> or <i>.

5. Emphasizing the relevant class name
. text-muted: Tip, use light grey (#999)
. Text-primary: Main, using Blue (#428bca)
. text-success: Success, using light green (#3c763d)
. TEXT-INFO: Notification information, using light blue (#31708f)
. text-warning: Warning, using yellow (#8a6d3b)
. Text-danger: Dangerous, using brown (#a94442)

6. Bootstrap controls the alignment style of text by defining four class names:
. Text-left: Left Justified
. Text-center: Center Alignment
. Text-right: Right-justified
. Text-justify: Justify on both sides

7. Go to the unordered list
Bootstrap is very thoughtful for many developers to consider, by adding a class name to the unordered list ". List-unstyled" so that the default style of list style can be removed.

8. Inline list to make navigation bar
By adding the class name ". List-inline" to implement the inline list, the simple point is to change the vertical list to a horizontal list, and remove the bullets (numbering) to maintain the horizontal display. It can also be said that inline lists are created for horizontal navigation.

9. Code Style
The bootstrap mainly offers three code styles:
1. Use <code></code> to display single-line inline code
You only need to add the class name ". Pre-scrollable" on the pre tag, you can control the code block area maximum height is 340px, once the height is exceeded, the scroll bar will appear on the Y axis.
2. Use <pre></pre> to display multi-line block code
3, use <kbd></kbd> to display the user input code

10. Bootstrap provides different class names for different style styles of the table, mainly including:
. Table: Base table
Set the margin-bottom:20px for the table and set the cell padding
A 2px grey solid line is set at the bottom of the thead.
A 1px light gray line is set at the top of each cell
. table-striped: Zebra crossing table
<table class= "Table table-striped" >
. table-bordered: Table with borders
<table class= "Table table-bordered" >
. table-hover: Table with mouse hover highlighting
<table class= "Table Table-hover" >
. table-condensed: Compact Form
<table class= "Table table-condensed" >
. table-responsive: Responsive table
<table class= "Table table-bordered" >

11. <tr> provides five different class names, each of which controls the different background colors of the row
. Active represents information for the current activity
. Success means success or correct behavior
. info indicates neutral information or behavior
. Warning the warning to pay special attention to
. Danger represents a dangerous or possible wrong behavior

Chapter III Forms
3.1 Basic Forms
In the bootstrap framework, by customizing a class name ' Form-control ', that is, if these elements use the class name "Form-control", some design-specific effects will be implemented.
1, the width becomes 100%
2. A light gray (#ccc) border is set
3, with 4px rounded corners
4. Shadow and border effects change when the shadow effect is set and the element gets focus
5, set the color of the placeholder for #999

3.2 Level Form
To achieve a horizontal form effect in the bootstrap framework, the following two conditions must be met:
1, in the <form> element is the use of the class name "Form-horizontal".
2, with the bootstrap frame grid system.

3.3 Inline Form
You only need to add the class name "Form-inline" to the <form> element.

3.4 Form control (input box inputs)
You must also add a type when using input in bootstrap, and if you do not specify a type, you will not get the correct style because the bootstrap framework is passed input[type= "?"] (where the? symbol represents type
To make the control style error-prone in various form styles, you need to add the class name "Form-control"

3.5 Form controls (drop-down selection box Select)
The drop-down selection box in the bootstrap frame uses the same as the original, and the multiline selection sets the value of the multiple property to multiple.

3.6 Form controls (check box checkbox and single select button radio)
. CheckBox. Radio

3.7 Form controls (check boxes and radio buttons are arranged horizontally)
1. If the checkbox needs to be arranged horizontally, simply add the class name "Checkbox-inline" on the label label
2. If the radio needs to be arranged horizontally, simply add the class name "Radio-inline" to the label label.

3.8 Form controls (buttons)
The buttons in the bootstrap frame are implemented using <button>.

3.9 Form Control Size
1, INPUT-SM: Make the control smaller than normal size
2, INPUT-LG: Make the control larger than normal size

3.10 Form Control State (focus state)
The focus state is implemented by pseudo-class ": Focus"
To have the control have a style effect in the focus state, you need to add the class name "Form-control" to the control

3.11 Form control state (disabled state)
Just add "disabled" to the form control you want to disable:
If FieldSet sets the disabled property, the entire domain will be disabled.

3.12 Form control state (validation status)
When making a form, it is unavoidable to do form validation. It is also necessary to provide a validation state style, which is also available in the bootstrap framework.
1. Has-warning: Warning Status (yellow)
2. Has-error: Error status (red)
3. Has-success: Success status (Green)
You only need to add the State class name on the Form-group container when you use it.
If you want the form to show the icon in its corresponding state, simply add the class name "Has-feedback" in the corresponding state. Note that this class name is to be combined with "Has-error", "has-warning", and "has-success":
Note: Icon icon is only useful when referencing a CSS file remotely

3.13 Form Tip Information
A "Help-block" style is used in the bootstrap frame to display the cue information in chunks and at the bottom of the control.

3.14 Basic Buttons
The basic button for the bootstrap framework v3.x version is the same as the basic button for the v2.x version, and is implemented by the class name "BTN".
can be implemented via tags such as input a span

3.15 Default button
The bootstrap framework first defines a basic button style through the base class name ". Btn", and then defines a default button style through ". Btn-default".

3.20 button Size
button to change the size of the button via. Btn-lg. BTN-SM Btn-xs.

3.21 block button
A class name of "Btn-block" is provided in the bootstrap framework. The button uses this class name to fill the container with the button, and the button will not have any padding and margin values.

3.22 Button State--Active status
The active state of the bootstrap button mainly includes the hover state of the button (: hover), the Click State (: Active) and the Focus state (: Focus).

3.23 Button state-disabled state
In the bootstrap framework, there are two ways to disable a button:
Method 1: Add the disabled attribute to the label
Method 2: Add the class name "disabled" to the element tag
If the button is disabled by the class name ". Disable", its link behavior cannot be suppressed. The way to add the "disabled" attribute to the element label is to suppress the default behavior of the element.

3.24 Images
1, Img-responsive: Responsive image, mainly for responsive design
2, img-rounded: Fillet picture
3, img-circle: Circular picture
4. Img-thumbnail: Thumbnail image

3.25 of 200 Icons:
The icons in the bootstrap frame are font icons, which are implemented by loading fonts with the @font-face property.

Fourth Chapter grid System
1. The data row (. Row) must be included in the container (. Container) to give it the appropriate alignment and padding (padding).
2. Columns (. column) can be added in a row (. row), but the sum of the columns cannot exceed the total number of columns in the split, such as 12
3, the specific content should be placed in the column container (columns), and only columns (column) can be used as a direct child element of the row container (. Row)

4.4 Column Offset
Simply add the class name "col-md-offset-*" to the column element (where the asterisk represents the number of combination of columns to offset), then the column with that class name will be shifted to the right. For example, you add "col-md-offset-4" on a column element to indicate that the column moves the width of 4 columns to the right
However, there is one detail to note that when you use "col-md-offset-*" to offset a column to the right, you want to ensure that the total number of columns and offset columns does not exceed 12, or the column line will be displayed

4.5 Column Sorting
Column sorting is actually changing the direction of the column, that is, changing the left and right floats, and setting the floating distance. In the bootstrap framework, the grid system is by adding the class name "col-md-push-*" and "col-md-pull-*" (where the asterisk represents the number of column combinations moved).

Nesting of 4.6 columns
The grid system of the bootstrap framework also supports nesting of columns. You can add one or more row containers to a column, and then insert columns in the row container (using columns as described earlier).

5th Chapter menu, button and navigation
5.1 Drop-down menu
1. Use a container called "dropdown" to wrap the entire drop-down menu element, in the example:
<div class= "dropdown" ></div>
2. Use a <button> button as the parent menu, and define the class name "Dropdown-toggle" and the Custom "Data-toggle" attribute, and the value must be the same as the Outer container class name, this example is:
Data-toggle= "Dropdown"
3, drop-down menu items use a UL list, and define a class named "Dropdown-menu", this example is:
<ul class= "Dropdown-menu" >

5.3 Drop-down menu (drop-down divider)
The drop-down menu in the bootstrap framework also provides a drop-down divider, assuming that the drop-down menu has two groups, then the group can add a drop-down divider to the group by adding an empty <li>, and adding the class name "divider" to the <li>.

5.4 Drop-down menu (menu title)
You can add a header (title) to each group by adding a Dropdown-header class

5.5 Drop-down menu (alignment)
The bootstrap Frame drop-down menu is left-aligned by default, and if you want the drop-down menu to be right-aligned relative to the parent container, you can add a "pull-right" or "Dropdown-menu-right" class name on "Dropdown-menu".

5.6 Drop-down menu (menu item status)
The default state of a drop-down menu item (without setting) has a suspended state (: hover) and a focus state (: Focus) and a current state (. Active) and a disabled state (. Disabled). These two state usage methods only need to add the corresponding class name on the corresponding menu item:

5.7 button (Button group)
For the structural aspect, it is very simple. Use a container called "btn-group" to place multiple buttons in this container.

5.8 button (Button toolbar)
You just need to put the button group "Btn-group" in a large container "Btn-toolbar" in a group

5.9 buttons (nested groupings)
When using, only need to make the drop-down menu "dropdown" container replaced with "Btn-group", and with the normal button on the same level

5.10 Buttons (vertical grouping)
We just need to change the "Btn-group" class name of the horizontal group to "btn-group-vertical"

5.11 button (equal button)
The Adaptive grouping button is also very easy to implement by appending a "btn-group-justified" class name to the button group "Btn-group"

5.12 button drop-down menu
The button drop-down menu is actually the normal drop-down menu, except for the "<a>" tab element replaced by the "<button>" tab element. The only difference is that the outer container "Div.dropdown" is replaced with "Div.btn-group"

5.13-button downward-pointing triangle
The downward triangle of the button, we are adding an "<span>" tag element to the <button> tag, and named "Caret":
You need to append the "Dropup" class name to the ". Btn-group" Class (This is also the class name to use for the pull-up drop-down menu).

5.15 Navigation
The bootstrap framework makes navigation bars primarily through the ". Nav" style. The default ". Nav" style does not provide a default navigation style and must be attached to another style to be valid, such as "Nav-tabs", "Nav-pills", and so on
Suppose we want the "Home" item to be the currently selected item, just add the class name "class=" "active" to its label
Some tabs also come with a disabled state to achieve this effect by adding "class=" disabled "" to the label item
Capsule-shaped (pills) navigation only need to change the class name "Nav-tabs" to "Nav-pills"
To create a vertical stack navigation, you only need to add a "nav-stacked" on the basis of "Nav-pills"

5.16 Adaptive Navigation (use)
Just replaced another class name "Nav-justified" when making adaptive navigation. Of course he needs to work with "nav-tabs" or "nav-pills".

5.17 Navigation Plus drop-down menu (level two navigation)
Just use Li as the parent container, using the class name "dropdown", and nesting another list in Li ul

5.18 breadcrumb-style navigation
Use the way is very simple, for OL join Breadcrumb class

Sixth chapter navigation Bar
6.1 Basic navigation Bar
First step: First add the class name "Navbar-nav" based on the list of production navigation (<ul class= "NAV" >)
Step Two: Add a container (div) outside the list, and use the class name "NavBar" and "Navbar-default"

6.2 Navigation bar with form
Place a form with the Navbar-form class name in the NavBar container

6.3 Fixed navigation Bar
The bootstrap framework provides two ways to fix the navigation bar:

?. Navbar-fixed-top: The navigation bar is docked at the top of the browser window

?. Navbar-fixed-bottom: The navigation bar is docked at the bottom of the browser window
Just append the corresponding class name to the outer container navbar of the authoring navigation bar.
There are bugs and workarounds:
Body {
padding-top:70px;/* when there is a top fixed navigation bar set */
padding-bottom:70px;/* with the bottom fixed navigation bar set */
}
We also have other workarounds to put the fixed navigation bar in front of the page content:

6.4 Responsive Navigation Bar
How to use:

1, ensure that the content needs to be folded in the narrow screen must be wrapped in a div, and for this div to add collapse, Navbar-collapse two class names. Finally, add a class name or ID name for this div.

2, to ensure that the narrow screen to display the icon style (fixed wording):

<button class= "Navbar-toggle" type= "button" data-toggle= "Collapse" >
<span class= "Sr-only" >toggle navigation</span>
<span class= "Icon-bar" ></span>
<span class= "Icon-bar" ></span>
<span class= "Icon-bar" ></span>
</button>
3. Add data-target= ". Class name/#id名 for button"

6.5 Anti-color navigation bar
There is no difference between using the method, just replacing the Navbar-deafult class name with Navbar-inverse.

6.6 Pagination Navigation (pager with page number)
Add the pagination method to the UL label

6.7 Paging (Paging page navigation)
Add the pager class to the UL tag:
By default, page paging navigation is centered, but sometimes we need a left and a right. The bootstrap framework provides two styles:

? Previous: Let the "back" button reside on the left

? Next: Let the "next" button reside right

6.8 tags
For example, by adding a new navigation item to the navigation, a "new" tag may be added to tell the user. This is the newly added navigation item
In the bootstrap framework, the effect is deliberately extracted as a label component and highlighted with a ". Label" style.
Like the button Element button, the label style also provides multiple colors:

? Label-deafult: Default label, dark grey

? Label-primary: Main label, dark blue

? Label-success: Success Tag, green

? Label-info: Information label, light blue

? Label-warning: Warning Label, Orange

? Label-danger: Error tag, red

6.9 Coat of arms
The badge effect is very similar to the one previously described in the label. Also used to do some informational use
In the bootstrap framework, this effect is described as a badge effect, using the "badge" style to achieve

Seventh chapter: Other built-in components
7.1 Thumbnail (one)
The bootstrap framework independently sets this part up as a module component. And through the "thumbnail" style with the bootstrap grid system to achieve.
On the basis of only thumbnails, a container with a div named "caption" is added, where other content, such as title, text description, button, etc., is placed in this container:

7.2 Default Alert box
The bootstrap framework uses the "alert" style to implement the alert box effect. By default, four different alert box effects are available:

1, Success warning Box: Tell with the user operation success, in the "alert" style based on the "alert-success" style, the specific presentation is the background, border and text are green;

2, Information warning box: To provide users with information, in the "alert" style based on the "Alert-info" style, the specific presentation is the background, border and text are light blue;

3, Warning Alert box: Prompt users to operate carefully (provide warning information), in the "alert" style based on the "alert-warning" style, the specific presentation is the background, border, text is light yellow;

4, Error warning Box: Prompt user operation error, the "alert" style based on the "Alert-danger" style, the actual background, border and text are light red.

7.3 Warning boxes to turn off
Just add a close button to the default Alert box. Then proceed to three steps:

1. The "alert-dismissable" style needs to be added based on the basic alert box "alert".

2. Add the class= "Close" class to the button tag to implement the style of the alert box Close button.

3. To ensure that a custom property is set on the Close button element: "data-dismiss=" alert "(Because the Disable alert box requires JavaScript to detect the property, which controls the closing of the alert box).

7.4 Link to the warning box
The bootstrap framework adds a class name named "Alert-link" to the link to the alert box and provides highlighting to the link through the "Alert-link" style.

7.5 Progress Bar--basic style
Bootstrap framework is also implemented in this way, he provides two containers, outer containers using the "progress" style, sub-containers using the "Progress-bar" style. Where progress is used to set the container style for the progress bar, and Progress-bar is used to limit progress on the progress bar.

7.6 Progress Bar--Color progress bar
? Progress-bar-info: Indicates the information progress bar, the progress bar color is blue

? Progress-bar-success: Indicates success progress bar, progress bar color is green

? Progress-bar-warning: Indicates a warning progress bar, the progress bar color is yellow

? Progress-bar-danger: Indicates error progress bar, progress bar color is red
It's very simple to use, just add the corresponding class name to the underlying progress.

7.7 Progress Bar-Stripe progress bar
Using the stripe progress bar in the bootstrap frame only needs to add the class name "Progress-striped" based on the container "progress" of the progress bar

7.8 progress Bar--Dynamic stripe progress bar
Add the "Active" class name on the basis of the progress bar "Progress progress-striped" two classes.

7.9 progress Bar--Cascade progress bar
Only need to add the corresponding progress bar in the "Progress" container

7.10 progress Bar--a progress bar with label
Just add the values you need to the progress bar

7.11 Media Object--Default Media Object
? Media-to-image container: Often used as a "media" class name to hold all the content of a media object

? Object of the media to the image: often used "Media-object", is the object in the media object, is often the picture

? The body of the media object: often used "media-body", that is, the media on the image of the main content, can be any element, often is the picture side content

? Title of the media object: often used "media-heading", which is used to describe a caption of an object, this section is optional
In addition to the above four sections, "Pull-left" or "pull-right" are often used in the bootstrap framework to control how objects float in media objects.

7.11 Media Objects--nesting of media objects
You only need to place another media object structure inside the body of the media object "Media-body"

7.12 Media Objects--List of media objects
The bootstrap framework provides a list of effects that can be used when writing structures, using UL, and adding the class name "Media-list" to the UL, while using "media" on Li

7.13 List Group--base list group
? List-group: List group container, commonly used is the UL element, of course, can also be ol or DIV element
? List-group-item: list items, usually Li elements, and of course div elements

7.14 List Groups-list groups with badges
It's simple, just add the badge component "badge" to "List-group-item":

7.15 list groups--Custom list groups
? List-group-item-heading: Used to define the header style of a list item
? List-group-item-text: Used to define the main contents of a list item

7.16 List Group--Status settings for list items
? Active: Represents the current state
? Disabled: Indicates disabled state

7.17 List Group--colorful list group
? List-group-item-success: Success, background color green

? List-group-item-info: Information, background color blue

? List-group-item-warning: Warning, background color is yellow

? List-group-item-danger: Error, background color is red

If you want to add a background color to the list item, simply add the corresponding class name on the "List-group-item" basis:

7.18 Panel--base panel
The base panel is simple enough that a div container uses the "panel" style to produce a text display block with a border. Because "panel" does not control the theme color, the "panel" on the basis of the addition of a control color theme "Panel-default", in addition to add a "div.panel-body" to place the panel body content

7.19 panel-panel with head and tail
? Panel-heading: Used to set the panel head style
? Panel-footer: Used to set the Panel trailer style

7.20 Panel--color panel
? Panel-primary: Key Blue

? Panel-success: Success Green

? Panel-info: Information Blue

? Panel-warning: Warning Yellow

? Panel-danger: Dangerous Red
Using the method is simple, just add the class name you need on the Panel's class name

7.21 panel--Nested table in panel
When using the panel, you will place the required content in the Panel-body, which may be pictures, tables, or lists, etc.

Eighth Chapter JavaScript Plugin
8.1 Importing JavaScript plugins
? Animation transitions (transitions): corresponding plug-in file "Transition.js"

? Modal pop-up window (Modal): corresponding plugin file "Modal.js"

? Drop-down menu (Dropdown): corresponding plug-in file "Dropdown.js"

? Scroll detection (scrollspy): corresponding plug-in file "Scrollspy.js"

? tab: The corresponding plug-in file "Tab.js"

? Prompt box (tooltips): corresponding plug-in file "Tooltop.js"

? Popup box (Popover): corresponding plug-in file "Popover.js"

? Warning Box (alert): The corresponding plug-in file "Alert.js"

? Button (Buttons): corresponding plug-in file "Button.js"

? Folding/accordion (Collapse): corresponding plug-in file "Collapse.js"

? Picture Carousel Carousel: Corresponding plugin file "Carousel.js"

? Automatic positioning Buoy Affix: corresponding plug-in file "Affix.js"

Download of the individual plugins above can be downloaded to GitHub (https://github.com/twbs/bootstrap).

8.2 Animation Transitions (transitions)
The Transition.js file provides an animated transition effect for bootstrap components with transition animation effects. However, it is important to note that these transition animations are implemented using CSS3, so the Ie6-8 browser does not have these transition animation effects.

8.3 Modal pop-up box (modals)
? Pop-up box header, generally used "modal-header", mainly including the title and Close button

? Pop-up box body, generally using "modal-body", the main content of the popup box

? Pop-up frame foot, generally using "modal-footer" means, the main Place action button

8.3 Modal Popup--Trigger modal popup 2 ways
Method one: Modal popup declaration, only need to customize two necessary properties: Data-toggle and Data-target (the declarative triggering method in bootstrap generally relies on these custom data-xxx properties. such as data-toggle= "" or data-dismiss= "")
Method Two: Trigger modal popup window can also be a link <a> element, then you can use the link element's own href attribute to replace the Data-target property

8.4 Modal Popup--adds excessive animation to the popup box
You can add a transition animation effect to the modal popover by adding the class name "Fade" to ". Modal".

Bootstrap Study record (MU course net tutorial)