#NavBar

#Text/Typography

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)

h6 Bootstrap heading (12px)

Lighter, Secondary Text

The small element is used to create a lighter, secondary text in any heading:

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text

h6 heading secondary text

Use the mark element to highlight text.

The WHO was founded in 1948.

注意: /etc/ssh下有一个 ssh_config的文件，注意是修改 sshd_config，不是 ssd_config

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

Coffee

- black hot drink

Milk

- white cold drink

The following HTML elements: span, section, and div defines a section in a document.

Use ctrl + p to open the Print dialog box.

          Text in a pre element
          is displayed in a fixed-width
          font, and it preserves
          both      spaces and
          line breaks.
        

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

This paragraph stands out.

This paragraph is smaller.

Left-aligned text.

Right-aligned text.

Center-aligned text.

Justified text. Justified text. Justified text. Justified text. Justified text. Justified text.

No wrap text. No wrap text. No wrap text. No wrap text.

Tip: Try to resize the browser window to see the behaviour of justify and nowrap.

Lowercased text.

Uppercased text.

Capitalized text.

The WHO was founded in 1948. (normal abbr)

The WHO was founded in 1948. (slightly smaller abbr)

• Coffee
• Tea
  • Black tea
  • Green tea
• Milk

• Coffee
• Tea
• Milk

Use the .dl-horizontal class line up the description list side-by-side when the browser window expands:

Coffee

- black hot drink

Milk

- white cold drink

Tip: Try to resize the browser window to see the behaviour of the description list.

If you add the .pre-scrollable class, the pre element gets a max-height of 350px and provides a y-axis scrollbar:

Text in a pre element
        is displayed in a fixed-width
        font, and it preserves
        both      spaces and
        line breaks.

#Tables

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Striped Rows

The .table-striped class adds zebra-stripes to a table:

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Bordered Table

The .table-bordered class adds borders to a table:

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Hover Rows

The .table-hover class enables a hover state on table rows:

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Condensed Table

The .table-condensed class makes a table more compact by cutting cell padding in half:

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Contextual Classes

Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.

Firstname	Lastname	Email
Default	Defaultson	def@somemail.com
Success	Doe	john@example.com
Danger	Moe	mary@example.com
Info	Dooley	july@example.com
Warning	Refs	bo@example.com
Active	Activeson	act@example.com

Responsive Table

The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:

#Images

#Jumbotron and Page Header

#Wells

#Alerts

#Buttons

Button Group

The .btn-group class creates a button group:

hello hello hello hello hello hello hello hello

Button Groups - Set Sizes

Add class .btn-group-* to size all buttons in a button group.

Large Buttons:

Default Buttons:

Small Buttons:

Extra Small Buttons:

Vertical Button Group

Use the .btn-group-vertical class to create a vertical button group:

hello hello hello hello hello hello hello hello

Justified Button Groups

To span the entire width of the screen, use the .btn-group-justified class:

hello world

Justified Button Groups

Nesting Button Groups

Nest button groups to create drop down menus:

Split Buttons

Glyphicon Examples

Envelope icon:

Envelope icon as a link:

Search icon:

Search icon on a button: Search

Search icon on a styled button: Search

Print icon:

Print icon on a styled link button: Print

Badges

News 5
Comments 10
Updates 2

Badges on Buttons

Primary 7 Success 3 Danger 5

Labels

Example New

Example New

Example New

Example New

Example New

Example New

Contextual Label Classes

Contextual classes can be used to color the label.

Default Label Primary Label Success Label Info Label Warning Label Danger Label

Basic Progress Bar

Progress Bar With Label

Colored Progress Bars

The contextual classes colors the progress bars:

Striped Progress Bars

The .progress-bar-striped class adds stripes to the progress bars:

Animated Progress Bar

The .active class animates the progress bar:

Stacked Progress Bars

Create a stacked progress bar by placing multiple bars into the same div with class .progress:

Pagination - Active State

Add class .active to let the user know which page he/she is on:

• 1
• 2
• 3
• 4
• 5

Pagination - Disabled State

Add class .disabled if a page for some reason is disabled:

• 1
• 2
• 3
• 4
• 5

Pagination - Sizing

Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.

Large:

• 1
• 2
• 3
• 4
• 5

Default:

• 1
• 2
• 3
• 4
• 5

Small:

• 1
• 2
• 3
• 4
• 5

Breadcrumbs

The .breadcrumb class indicates the current page's location within a navigational hierarchy:

• Home
• Private
• Pictures
• Vacation

Pager

The .pager class provides previous and next buttons (links):

• Previous
• Next

Pager

The .previous and .next classes align each link to the sides of the page:

• Previous
• Next

Basic List Group

• First item
• Second item
• Third item

List Group With Badges

• New 12
• Deleted 5
• Warnings 3

List Group With Linked Items

Active Item in a List Group

List Group With a Disabled Item

List Group With Contextual Classes

• First item
• Second item
• Third item
• Fourth item

Linked Items With Contextual Classes

Move the mouse over the linked items to see the hover effect:

List Group With Custom Content

Basic Panel

Panel Heading/Footer

Panel Group

The panel-group class clears the bottom-margin. Try to remove the class and see what happens.

Panels with Contextual Classes

Dropdowns

The .dropdown class is used to indicate a dropdown menu.

Use the .dropdown-menu class to actually build the dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".

Dropdowns

The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:

Dropdowns

The .dropdown-header class is used to add headers inside the dropdown menu:

Dropdowns

The .active class adds a blue background color to the active link.

The .disabled class disables a dropdown item (grey text color).

Dropdowns

Add the .dropdown-menu-right class to .dropdown-menu to right-align the dropdown menu:

Dropdowns

The .dropup class makes the dropdown menu expand upwards instead of downwards:

Dropdowns

The .dropdown class is used to indicate a dropdown menu.

Use the .dropdown-menu class to actually build the dropdown menu.

Simple Collapsible

Click on the button to toggle between showing and hiding content.

Simple collapsible

Simple Collapsible

Simple collapsible

Simple Collapsible

Click on the button to toggle between showing and hiding content.

Simple collapsible

Collapsible Panel

Click on the collapsible panel to open and close it.

Collapsible List Group

Click on the collapsible panel to open and close it.

Accordion Example

Note: The data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

Inline List

• Home
• Menu 1
• Menu 2
• Menu 3

Tabs

• Home
• Menu 1
• Menu 2
• Menu 3

Note: This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out how this can be done.

Tabs With Dropdown Menu

• Home
• Menu 1
  • Submenu 1-1
  • Submenu 1-2
  • Submenu 1-3
• Menu 2
• Menu 3

Pills

• Home
• Menu 1
• Menu 2
• Menu 3

Vertical Pills

Use the .nav-stacked class to vertically stack pills:

• Home
• Menu 1
• Menu 2
• Menu 3

Vertical Pills

Pills With Dropdown Menu

• Home
• Menu 1
  • Submenu 1-1
  • Submenu 1-2
  • Submenu 1-3
• Menu 2
• Menu 3

Centered Tabs

To center/justify the tabs and pills, use the .nav-justified class. Note that on screens that are smaller than 768px, the list items are stacked (content will remain centered).

• Home
• Menu 1
• Menu 2
• Menu 3

Centered Pills

• Home
• Menu 1
• Menu 2
• Menu 3

• Home
• Profile
• Disabled
• Dropdown
  • Action
  • Another action

Vertical (basic) form

Email:

Password:

Remember me

Submit

Inline form

Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.

Email:

Password:

Remember me

Submit

Inline form with .sr-only class

Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.

Email:

Password:

Remember me

Submit

Horizontal form

Email:

Password:

Remember me

Submit

Form control: input

The form below contains two input elements; one of type text and one of type password:

Name:

Password:

Comment:

Option 1

Option 2

Option 3

Option 1 Option 2 Option 3

Option 1

Option 2

Option 3

Option 1 Option 2 Option 3

Select list (select one): 1 2 3 4
Mutiple select list (hold shift to select more than one): 1 2 3 4 5

Email:

someone@example.com

Password:

Input Groups

The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".

The .input-group-addon class attaches an icon or help text next to the input field.

Text

It can also be used on the right side of the input:

Input Group Button

The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".

The .input-group-btn class attaches a button next to an input field. This is often used as a search bar:

Horizontal form: control states

Focused

Disabled

Disabled input and select list (Fieldset disabled)

Disabled select

Input with success and glyphicon

Input with warning and glyphicon

Input with error and glyphicon

Inline form: control states

Focused

Disabled

Input with success

Input with warning

Input with error

Input Sizing

The form below shows input elements with different heights using .input-lg and .input-sm:

Default input

input-lg

input-sm

Default select list 1 2 3 4

input-lg 1 2 3

input-sm 1 2 3

Legend

Email

Password

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

Selects

1 2 3 4 5
1 2 3 4 5

Cancel Submit

Media Object

Use the "media-left" class to left-align a media object. Text that should appear next to the image, is placed inside a container with class="media-body".

Tip: Use the "media-right" class to right-align the media object.

---

Carousel Example

Modal Example

Open Modal

Tooltip Example

The data-placement attribute specifies the tooltip position.

• Top
• Bottom
• Left
• Right