Bài mẫu

 
Core TypographyHeading Texth1. Heading Secondary texth2. Heading Secondary texth3. Heading Secondary texth4. Heading Secondary texth5. Heading Secondary texth6. Heading Secondary textTIPS: Create lighter, secondary text in any heading with a generic <small> tag or the .small class.
Example body textThis is a lead paragraph.
Make a paragraph stand out by adding .lead.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Nullam quis risus eget first.last@example.comEmphasis classesThis is a .mute paragraph.
This is a .text-primary paragraph.
This is a .text-warning paragraph.
This is a .text-danger paragraph.
This is a .text-success paragraph.
This is a .text-info paragraph.
Alignment classesThis is a left aligned text .text-left
This is a center aligned text .text-center
This is a right aligned text .text-right
This is a justify aligned text which is often used in Book Design, Magazine or special Typo Pages. Create a justify aligned text with .text-justify class.
 
BlockquotesThis is a <blockquote> in a <.well>.
Quote's author in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Quote's author in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Quote's author in Source Title 
Tagshotel booking discount location map travel 
Color SwatchesBrand Colors#ff5a00Brand Primary#4275f4Brand Secondary#f0ad4eBrand Warning#d9534fBrand Danger#5bc0deBrand Info#5cb85cBrand Success Grayscale Levels#222222Gray Darker#333333Gray Dark#555555Gray#999999Gray Light#eeeeeeGray Lighter#f6f6f6Gray Lightest 
ButtonsNormal Button Primary Button Success ButtonWarning Button Danger Button Info Button 
NavigationsTabs

Home
Profile
Dropdown Action
Another action
Another action

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.
GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).
In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.
GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).
In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.
GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).
In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.
GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).
Vertical Menus

Active Menu Item
Menu Item
Menu Item
Disabled Menu Item
Dropdown Action
Another action
Something else here
Separated link

 
FormsInputsInput success Input error Input warning Disabled input Sample Basic FormLegendEmailPassword Checkbox Textarea A longer block of help text that breaks onto a new line and may extend beyond one line.Radios Option one is this Option two can be something else Selects12345
12345Cancel Submit 
Hero UnitsJumbotronThis is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Change a few things up and try submitting again.× Well done! You successfully read this important alert message.× Heads up! This alert needs your attention, but it's not super important.× Warning! Best check yo self, you're not looking too good. Badges

Home 42
Profile
Messages 25
Notices 2

LabelsDefault Primary Success Info Warning Danger 
MiscList groups

14 Cras justo odio
2 Dapibus ac facilisis in
Morbi leo risus
1 Morbi leo risus
2 Dapibus ac facilisis in

9 Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at erosList group item headingDonec id elit non mi porta gravida at eget metus risus varius blandit.
List group item headingDonec id elit non mi porta gravida at eget metus.
List group item headingDonec id elit non mi porta gravida at eget metus.
PanelsPanel headingPanel contentPanel primaryPanel contentPanel successPanel contentPanel warningPanel contentPanel dangerPanel contentPanel infoPanel content WellsLook, I'm in a small well!Look, I'm in a well!Look, I'm in a large well!{html5fb id=4 link=Album 2011}Read full article