Bootstrap 3rd Day
Picture Style
- . img-responsive: Add this style directly to a picture to implement a responsive picture.
- . center-block: Picture centered style, not text-center style.
- Picture shape Style:. img-rounded (Fillet picture),. Img-circle (round picture),. Img-thumbnail (Border fillet)
?
Helper class Styles
- Text color classes:. text-muted (soft),. Text-primary,. text-success,. Text-info,. text-warning,. Text-danger
- Background color classes:. bg-primary,. bg-success,. Bg-info,. bg-warning,. Bg-danger
- Triangle symbol: <span class = "Caret" ></span>
- Fast Floating class:. Pull-left (left floating),. Pull-right (right float)
- Clear float: Adds a. Clearfix to the parent element to clear the float.
- To center a Content Block page: <div class = "Center-block" ></div>
?
CSS components-drop-down menu
- The. Dropdown contains drop-down menu triggers and drop-down menus (the parent element of the drop-down menu).
- Data-toggle Properties: Drop-down menu trigger. The value is "dropdown".
- . Dropdown-menu: Give <ul> Specify the style of the drop-down menu.
- . Dropup: Pop-up drop-down menu (parent element of drop-down menu).
- Drop-down menu alignment:. Dropdown-menu-left and. Dropdown-menu-right
- . Divider: Adds a divider for the drop-down menu to group multiple links.
- . Disabled: Disabled menu item.
?
CSS Components--button groups
- . Btn-group: Button group (can be implemented to put a set of buttons on the same row).
- . Btn-toolbar: Button group toolbar (where multiple button groups are placed).
- Size of the button group:. BTN-GROUP-LG,. Btn-group-sm,. Btn-group-xs
- . Btn-group-vertical: A vertically arranged group of buttons.
?
CSS component--button drop-down menu
- Single button drop-down menu
- Split button drop-down menu
?
CSS component--input box group
- . Input-group: Only for text box <input>, not for <select> and <textarea>.
- The. Input-group-addon is used to add additional elements to <input> before and after the assignment to a <span> element.
- Note: the. Input-group-addon and <input> elements are wrapped in. Input-group.
- . INPUT-GROUP-LG and. Input-group-sm can change the size of the input frame group.
- The. INPUT-GROUP-BTN can be a button for extra elements and should be the parent element of <button>.
?
CSS Components--tabs (tabs)
- . NAV is the base class for the tab page
- . Nav-tabs is a label page class style
- . Active is the status class for the tab page (current style)
- . Nav-pills Capsule Label page
- . nav-stacked Capsule tab Stacking arrangement (vertical arrangement)
?
CSS components--navigation bar
- . NavBar: The base class for the navigation bar for the <nav> element.
- . Navbar-default: Navigation bar Default style for <nav> elements.
- . Container is a child element of <nav>. The contents of the navigation bar are placed in it.
- . Navbar-header: Navigation bar header style.
- . Navbar-brand: Set branding icon style
- . Collapse is the base class for the style of the collapsed navigation bar.
- The. Navbar-collapse is a collapsed navigation bar style.
- . Nav is the link base class for the navigation bar.
- . Navbar-nav is the link style for the navigation bar.
- . Navbar-from: A navigation bar form that allows form elements to be lined up on the same line.
- . Navbar-left or. navbar-right: component arrangement. Alignment of navigation links, forms, buttons, or text.
- . NAVBAR-BTN: For <button> elements that are not in <form>, vertical alignment is achieved.
- . Navbar-text: The normal text for the navigation bar has line spacing and color, and is typically used for <p> elements.
- . Navbar-fixed-top: The navigation bar is pinned to the top for <nav> elements. Need to set padding-top:70px for <body>
- . Navbar-fixed-bottom: The navigation bar is docked at the bottom for <nav> elements. Need to set padding-bottom:70px for <body>;
- . Navbar-static-top: The navigation bar is stationary at the top for <nav> elements. Will disappear as the scroll bar moves.
- . navbar-inverse: The inverse color navigation bar can be implemented for <nav> elements.
CSS components--Path navigation
- . breadcrumb: The effect of bread crumbs can be achieved by assigning <ol>.
- . Active assigns the current column, the current column does not add the link.
CSS component--thumbnail image
- The. Thumbnail assigns a <a> element, which can be implemented with thumbnail styles.
- . Caption can implement thumbnail title and description
CSS component--pagination
- . pagination assign <ul> elements to achieve paging effect
- « Previous page
- » Next page
- . Disabled disabled state
- . Active Activation Status
- . PAGINATION-LG Paging Large size
- . PAGINATION-SM Paging Small size
- . Pager can achieve page flipping effects. Previous page, next page effect.
?
?
?
Bootstrap 3rd Day
