Boostrap Introduction + Style learning---

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

• Because the style does not have a style limit on the size of the picture, there are other ways to handle the size of the picture when you actually use it. For example, control picture container size. (Note that it is not possible to modify the size of the IMG image directly from the CSS style so that the operation does not respond)
• For rounded pictures and round picture effects, because they are implemented using the CSS3 fillet style, note that there is no fillet effect for IE8 and the following versions.

13. 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. Create the spacing between columns by setting the padding (padding). The effect of the padding (padding) is then offset by setting a negative margin (margin) for the first column and the last column.

For more detailed usage, the crossing net

14. Drop-down menu (basic usage)
1. Use a container called "dropdown" to wrap the entire drop-down menu element
2. A button is used as the parent menu, and the class name "Dropdown-toggle" and the Custom "Data-toggle" attribute are defined, and the value must be the same as the Outer container class name.
3, drop-down menu items use a UL list, and define a class named "Dropdown-menu"

<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Drop-down menu<span class="Caret"></span></button><ul class="Dropdown-menu" role="Menu" aria-labelledby ="dropdownMenu1">   <li role="Presentation"><a role="MenuItem" tabindex="1" href= "#">Drop-down menu item</a></li>...<li role="Presentation" class="Divider"></li>   <li role="Presentation"><a role="MenuItem" tabindex="1" href= "#">Drop-down menu item</a></li></ul></div>

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

15. Button (equal button)
The Divide button is also often referred to as the Adaptive Grouping button, and its implementation is very simple, just to append a "btn-group-justified" class name to the button group "Btn-group"

<div class="Btn-wrap"><div class="Btn-group btn-group-justified">  <a class="Btnbtn-default" href="#">Home</a>  <a class="Btnbtn-default" href="#">Product Show</a>  <a class="Btnbtn-default" href="#">Case study</a>  <a class="Btnbtn-default" href="#">Contact Us</a></div></div>

• Special statement: When making a group of sub-groups, try <a> to use the LABEL element to make the button, because using the <button> tag element, using display:table in some browsers support is not friendly.

16. Basic Navigation Bar
The main function of the ". NavBar" style is to set the effects of left and right padding and rounded corners, but his color-related styles do not have any settings, and the color of the navigation bar is controlled by ". Navbar-default".

• Add navigation bar Title
• Often in front of the menu will have a title (text font size is slightly larger than other text), in fact, in the bootstrap framework for everyone to do this consideration, which through the "Navbar-header" and "Navbar-brand" to achieve

17. Warning Box – Default alert box
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.

• Alert Box – A warning box that can be closed
  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).

• Alert Box – Link to alert 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.

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

19.js Plug-in introduction

• Disposable Introduction
  Bootstrap provides a single file that contains all JavaScript plugins for Bootstrap, i.e. bootstrap.js (compressed version: Bootstrap.min.js).

• Import separately:
  ? 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"

• Modal Pop-up box

• Modal popup –javascript parameter setting when triggering (I.)
  When you use JavaScript to trigger modal popups, the bootstrap framework provides settings, mainly including property settings, parameter settings, and event settings.
  

• Modal popup –javascript parameter setting when triggering (ii)
  

Copyright NOTICE: This article for Bo Master original article, thank you for reference! Where there is a problem, you are welcome to correct and progress together.

Boostrap Introduction + Style learning---