File header:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Basic table</title><Linkrel= "stylesheet"href= "//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></Head>
Bootstrap set the margin to 0 in the Reset.css file, so the other labels need to be redesigned margin.
1.h
The
Defines the. H1~.h6 six class names, as well as style and heading styles.
The subtitle is indicated by the <small> tag and must be included in the H tag.
< H1 > Bootstrap title one </H1><class= "H1"> Bootstrap title one </div>
0.2
Define <body> Font library, font size, line height, color,<p> tags inherit these settings, set Margin-bottom to 10px separately, and use the same method as normal.
Emphasis on content
Increase:. Lead;
Bold:<strong>; <b> (set Font-weight:bold)
Italic:<em>;<i> (set Font-style:italic)
Constant:<cite>
Become smaller: <small>,.small
Accent Class (color)
Text alignment
(Set Text-align:center, left, right, justify)
? . Text-left: Left Justified
? . Text-center: Center Alignment
? . Text-right: Right-justified
? . Text-justify: Justify on both sides
3. List (ul ol DL)
Bootstrap for the list, just make some adjustments on the margin
margin-top:0; margin-bottom:10px;
Remove bullets
. list-unstyled
(Padding-left:0;list-style:none; )
Inline list, making horizontal navigation
. list-inline
Code
<code> <pre> <kbd>
Set Maximum code area
4. Forms
Be aware that your <table> element must not be missing the class name table
? . Table: Base table
? . table-striped: Zebra crossing table
? . table-bordered: Table with borders
? . Table-hover: Table with mouse hover highlighting
? . table-condensed: Compact Form
? . table-responsive: Responsive table
<Tableclass= "Table"> <thead> <TR> <th>Table title</th> <th>Table title</th> <th>Table title</th> </TR> </thead> <tbody> <TR> <TD>Table cells</TD> <TD>Table cells</TD> <TD>Table cells</TD> </TR> <TR> <TD>Table cells</TD> <TD>Table cells</TD> <TD>Table cells</TD> </TR> </tbody> </Table>
Different line colors for <tr>
<tbody> <TRclass= "Active"> <TD>. Active</TD> <TD>Represents information for the current activity</TD> </TR> <TRclass= "Success"> <TD>. Success</TD> <TD>To indicate success or correct behavior</TD> </TR> <TRclass= "Info"> <TD>. info</TD> <TD>Information or behavior that is neutral</TD> </TR> <TRclass= "Warning"> <TD>. Warning</TD> <TD>To indicate a warning, need special attention</TD> </TR> <TRclass= "Danger"> <TD>. Danger</TD> <TD>An act that indicates danger or may be wrong</TD> </TR> </tbody>
5. Forms
<form role= "Form" >
Default vertical Display
Use <div class= "Form-group" > Surround controls and their labels
Set to input select TextArea. Form-control
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
Horizontal style form: label on left, control in right
1, in the <form> element is the use of the class name "Form-horizontal".
2, with the bootstrap frame grid system. (the grid layout will be explained in detail in a later section.)
inline Form : Control is displayed on one line
Add the class name "Form-inline" to the <form> element
form controls
Select:<select multiple class= "Form-control" > select multiple
TEXTAREA: <textarea class= "Form-control" rows= "3" ></textarea>
Radio,checkbox:div wrapped with a label and wrapped with input
<class= "checkbox"> <label> <type= "checkbox" value= ""> Remember password </label> </Div >
Radio,checkbox: Horizontal arrangement
The div (class= "form-group") is wrapped with a label (class= "Checkbox-inline" or "radio-inline") wrapped with input
Disabling controls: Adding the Disabled property on a control
<input class= "Input-lg" id= "Disabledinput" type= "text" placeholder= "form is disabled and cannot be entered" disabled>
Validation Status: Form-group container add has-success and other classes; If you want a label to be synchronized, you need to put a label on it. Control-label; Show icon needs to be in Form-group Plus. Has-feedback, and finally add a span to store the icon
form prompt Information:
Add a span after the Form-group container, adding the class name. Help-block
Button: Four ways, bootstrap with button, it is recommended to use button and a tag to make buttons
<input type= "button" >
<input type= "Reset" >
<input type= "Submit" >
<button></button>
Button style
. btn
. btn-default
Size:
. btn-lg
. btn-sm
. btn-xs
Block button: The button fills the container with no padding and margin. Btn-block
Disable button: Add Class. Disabled or Add Property disabled= "disabled"
[Layout] Bootstrap Basic TAB Summary
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
