Movatterモバイル変換


[0]ホーム

URL:


Menu
×
See More 
Sign In
+1 Get Certified Upgrade Teachers Spaces Bootcamps Get Certified Upgrade Teachers Spaces Bootcamps
   ❮     
     ❯   

BootstrapNavigation Components


Tabs and Pills

ClassDescriptionExample
.nav nav-tabsCreates navigation tabsTry it
.nav nav-pillsCreates navigation pillsTry it
.nav nav-pills nav-stackedCreates vertical navigation pillsTry it
.nav-justifiedMakes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs/pills are stackedTry it
.disabledIndicates a disabled (unclickable) tab/pillTry it
Navigation tabs with dropdown menuTry it
Navigation pills with dropdown menuTry it
.tab-contentTogether with .tab-pane and data-toggle="tab" (data-toggle="pill" for pills), it makes the tab/pill toggleableTry it
.tab-paneTogether with .tab-content and data-toggle="tab" (data-toggle="pill" for pills), it makes the tab/pill toggleableTry it

Navbars

ClassDescriptionExample
.navbarCreates a navigation barTry it
.navbar-brandAdded to a link or a header element inside the navbar to represent a logo or a headerTry it
.navbar-btnVertically aligns a button inside a navbarTry it
.navbar-collapseCollapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets)Try it
.navbar-defaultCreates a default navigation bar (light-grey background color)Try it
.navbar-fixed-bottomMakes the navbar stay at the bottom of the screen (sticky/fixed)Try it
.navbar-fixed-topMakes the navbar stay at the top of the screen (sticky/fixed)Try it
.navbar-formAdded to form elements inside the navbar to vertically center them (proper padding)Try it
.navbar-headerAdded to a container element that contains the link/element that represent a logo or a headerTry it
.navbar-inverseCreates a black navigation bar (instead of light-grey)Try it
.navbar-leftAligns nav links, forms, buttons, or text, in the navbar to the leftTry it
.navbar-linkStyles an element to look like a link inside the navbar (anchors get proper padding and an underline on hover, while other elements like p or span gets a default hover effect - white color in an inversed navbar and a black color in a default navbar)Try it
.navbar-navUsed on a <ul> container that contains the list items with links inside a navigation barTry it
.navbar-rightAligns nav links, forms, buttons, or text in the navbar to the right.Try it
.navbar-static-topRemoves left, top and right borders (rounded corners) from the navbar (default navbar has a gray border and a 4px border-radius by default)
.navbar-textVertical align any elements inside the navbar that are not links (ensures proper padding)Try it
.navbar-toggleStyles the button that should open the navbar on small screens. Often used together with three.icon-bar classes to indicate a toggleable menu icon (hamburger/bars)Try it


Breadcrumbs and Pagination

ClassDescriptionExample
.breadcrumbMakes a breadcrumbTry it
.pagerProvides simple pagination links (Previous/Next)Try it
.previousAligns the .pager previous button to the leftTry it
.nextAligns the .pager next button to the rightTry it
.disabledIndicates an unclickable linkTry it
.paginationProvides pagination linksTry it
.pagination-lgUsed together with the .pagination class to provide larger pagination linksTry it
.pagination-smUsed together with the .pagination class to provide smaller pagination linksTry it
.disabledIndicates an unclickable linkTry it
.activeIndicates the current pageTry it

Labels and Badges

ClassDescriptionExample
.label label-defaultIndicates a default grey labelTry it
.label label-primaryIndicates a blue label of type "primary"Try it
.label label-successIndicates a green label of type "success"Try it
.label label-infoIndicates a light blue label of type "info"Try it
.label label-warningIndicates a yellow label of type "warning"Try it
.label label-dangerIndicates a red label of type "danger"Try it
.badgeIndicates new or unread itemsTry it
.jumbotronIndicates a big box for calling extra attention to featured content or informationTry it
.jumbotron (extra)To let the .jumbotron box span the full width, and without rounded corners, place it outside the .container classTry it


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted ourterms of use,cookies andprivacy policy.

Copyright 1999-2026 by Refsnes Data. All Rights Reserved.W3Schools is Powered by W3.CSS.

-->
[8]ページ先頭

©2009-2026 Movatter.jp