Home > Developer > Web Develop
Bootstrap notes, bootstrap
1
Bootstrap takes precedence over mobile devices.
By adding. img-responsive class, you can make images in Bootstrap 3 more friendly to the support for responsive la S.
Use. col-md-offset-* to offset the column to the right.
2.
Common syntax of bootstrap fence:
<div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" > </div></div>
Bootstrap sets the global font-size to 14px and line-height to 1.428. These attributes are directly assigned to <body> and all paragraph elements.
4.Wrap any. table in. table-responsive to create a responsive table that will scroll horizontally on a small screen device (less than 768px. When the screen width is greater than 768px, the horizontal scroll bar disappears. 5
5.
A separate form control is automatically assigned some global styles. All <input>, <textarea>, and <select> elements with. form-control are set to width: 100% by default ;. Wrap the label and the previously mentioned controls in. form-group for the best arrangement.
6.
Set. form-inline for left-aligned and inline-block-level controls, which can be more compact.
7.
Add. form-horizontal to the form, and use the grid class preset by Bootstrap to horizontally layout the label and control group side by side. In this way, the behavior of. form-group is changed and displayed as a row in the raster system. Therefore, you no longer need to use. row.
8.
By applying. checkbox-inline or. radio-inline to a series of checkbox or radio controls, you can arrange these controls in one row.
9.
Add. has-warning,. has-error, or. has-success to the parent element of these controls. Any. control-label,. form-control, and. help-block contained in this element will accept these validation status styles.
10.
<Button type = "button" class = "btn-link"> Link </button> is similar to a's link.
<Div class = "center-block">... </div> the content area is centered.
If the widget is used to align the navigation bar, use. navbar-left or. navbar-right.
<Button type = "button" class = "close" aria-hidden = "true"> × </button>
Close button
<Div class = "jumbotron"> large screen Introduction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
