Bootstrap layout components
1. Bootstrap font icon
(1) Font icon list link
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
(2) Usage
To use icons, simply use the following code. Please keep the appropriate space between the icon and the text. No glyphicon's css.
<span></span>
(3) Customized font icon
We've seen how to use font icons, and next we'll see how to customize font icons.
We start with the example above and customize the icon by changing the font size, color, and applying text shadows.
A. Custom icons
<button type="button"> <span></span> User</button>
B. Customized font size
By increasing or decreasing the font size of the icon, you can make the icon look bigger or smaller.
<button type="button"style="font-size: 60px"> <span></span> User</button>
C. Customize font color
<button type="button"style="color: rgb(212, 106, 64);"> <span></span> User</button>
D. Apply text shadows
<button type="button"style="text-shadow: black 5px 3px 3px;"> <span></span> User</button>
2. Bootstrap drop-down menu
(1) The drop-down menu is switchable and is a context menu that displays the link in a list format. This can be achieved through interaction with the dropdown menu (Dropdown) JavaScript plugin.
To use the following menu, just add a drop-down menu in class .dropdown.
<div> <button type="button" id="dropdownMenu1" data-toggle="dropdown"> Topic <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Data Mining</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> Data Communication/Network</a> </li> <li role="presentation"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Separated Links</a> </li> </ul></div>
(2) Align
Align the drop-down menu right by adding class .pull-right to .dropdown-menu.
(3) Title
You can use class dropdown-header to add a title to the label area of the dropdown menu.
3. Bootstrap button group
(1) Button group allows multiple buttons to be stacked on the same line. This is very useful when you want to align the buttons together.
(2) Nesting
You can nest another button group within one button group, that is, nest another .btn-group within one .btn-group. This is used when you use the drop-down menu in combination with a series of buttons.
4. Bootstrap button drop-down menu
Use Bootstrap class to add a drop-down menu to the button. To add a drop-down menu to a button, simply place the button and drop-down menu in a .btn-group. You can also use <span></span> to indicate buttons as drop-down menus.
<div> <button type="button" data-toggle="dropdown"> Default <span></span> </button> <ul role="menu"> <li><a href="#">Function</a></li> <li><a href="#">Other</a></li> <li><a href="#">Other</a></li> <li><a href="#">Other</a></li> <li></li> <li><a href="#">Detached link</a></li> </ul></div>
(1) The split button drop-down menu
The split button drop-down menu uses roughly the same style as the drop-down menu button, but adds original functionality to the drop-down menu. On the left side of the split button is the original function, and on the right is the toggle that displays the drop-down menu.
<div> <button type="button">Default</button> <button type="button" data-toggle="dropdown"> <span></span> <span>Switch the drop-down menu</span> </button> <ul role="menu"> <li><a href="#">Function</a></li> <li><a href="#">Other</a></li> <li><a href="#">Other</a></li> <li></li> <li><a href="#">Disased link</a></li> </ul></div>
(2) Size of button drop-down menu
You can use the drop-down menu with buttons of various sizes: .btn-large, .btn-sm, or .btn-xs.
(3) Pull-up menu for buttons
The menu can also be stretched upwards, just simply add .dropup to the parent .btn-group container.
<div></div>
5. Bootstrap input box group
Enter the box group. The input box group extends from the form control. With input box groups, you can easily add text or buttons as prefixes and suffixes to text-based input boxes.
By adding contents of prefix and suffixes to the input field, you can add common elements to the user input. For example, you can add a dollar sign, or add @ before the Twitter username, or other public elements required by the application interface.
The steps to add a prefix or suffix element to .form-control are as follows:
A. Place the prefix or suffix element in a <div> with class .input-group.
B. Then, within the same <div>, place extra content in the <span> of class .input-group-addon.
C. Place the <span> in front or behind the <input> element.
To maintain cross-browser compatibility, avoid using <select> elements, as they do not fully render the effect in a WebKit browser. Also, do not apply the input box group class directly to the form group, the input box group is an isolated component.
<form role="form"> <div> <span>$</span> <input type="text"placeholder="twitterhandle"> <span>.00</span> </div> </form>
(1) Enter the size of the box group
You can change the size of the input box group by adding classes of relative form sizes to .input-group (such as .input-group-lg, input-group-sm, input-group-xs) to .input-group. The contents in the input box will be automatically resized.
(2), check boxes and radio plug-ins
You can use check boxes and radio plugins as prefixes or suffix elements for input box groups
<div> <span> <input type="checkbox"> </span> <input type="text"></div>
(3) Button plug-in
You can also use the button as a prefix or suffix element of the input box group. At this time, you are not adding .input-group-addon class. You need to use class .input-group-btn to wrap the button. This is required because the default browser style will not be rewritten.
<div> <span> <button type="button"> Go! </button> </span> <input type="text"></div>
(4) Button with drop-down menu
Adding a button with a drop-down menu to the input box group is simply wrapped in a .input-group-btn class.
<div> <div> <button type="button" data-toggle="dropdown"> dropdown menu<span></span> </button> <ul> <li><a href="#">Function</a></li> <li><a href="#">Other</a></li> <li><a href="#">Other</a></li> <li><a href="#">Other</a></li> <li></li> <li><a href="#">Detached link</a></li> </div> <input type="text"></div>
(5) Split drop-down menu button
Add a split button with a drop-down menu in the input box group, using roughly the same style as the drop-down menu button, but adding the main features to the drop-down menu,
<div> <div> <button type="button" tabindex="-1"> drop-down menu</button> <button type="button" data-toggle="dropdown" tabindex="-1"> <span></span> <span>Switch the drop-down menu</span> </button> <ul> <li><a href="#">Function</a></li> <li><a href="#">Other</a></li> <li><a href="#">Other</a></li> <li></li> <li><a href="#">Detached link</a></li> </div> <input type="text"> </div>
6. Bootstrap navigation elements
Use the same tags and base class .nav. Bootstrap also provides a helper class for sharing tags and states. Change the modified class and can be switched between different styles.
(1), table navigation or tag
Create a tagged navigation menu:
A. Start with an unordered list with class .nav.
B. Add class .nav-tabs.
<ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li></ul>
(2) Capsule-style navigation menu
A. Basic capsule navigation menu
If you need to change the label to the capsule style, you only need to use class .nav-pills instead of .nav-tabs, and the other steps are the same as above.
<ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li></ul>
B. Vertical capsule navigation menu
You can use class .nav-stacked while using class .nav and .nav-pills to make the capsules stack vertically.
<ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li></ul>
(3) Navigation with both ends aligned
You can make the tagged or capsule navigation menu equally wide to the parent element by using class .nav-justified while using .nav, .nav-tabs, or .nav, and .nav-pills, respectively, when the screen width is greater than 768px. On a smaller screen, the navigation links are stacked.
<ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li></ul><ul> <li><a href="#">Home</a></li></ul> <li><a href="#">Home</a></li></ul>
(4) Disable link
For each .nav class, if a .disabled class is added, a gray link is created, and the :hover status of the link is disabled.
<ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS (disable link)</a></li></ul><ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">VB.Net (disable link)</a></li></ul>
(5) Pull down menu
The navigation menu uses similar syntax to the drop-down menu. By default, the anchor of the list item works in conjunction with some data properties to trigger an unordered list with .dropdown-menu class.
A. Tags with drop-down menu
The steps to add a drop-down menu to a tag are as follows:
Start with an unordered list with class .nav .
Add class .nav-tabs.
Add an unordered list with .dropdown-menu class.
<ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li> <a data-toggle="dropdown" href="#">Java <span></span> </a> <ul> <li><a href="#">Swing</a></li> <li></li> <li><a href="#">Swing</a></li> <li><a href="#">Swing</a></li> <li><a href="#">Separated Links</a></li> </li> </li> <li><a href="#">PHP</a></li></ul>
B. Capsules with pull-down menu
The steps are the same as creating a tag with a drop-down menu, except that you need to change the .nav-tabs class to .nav-pills.
7. Bootstrap navigation bar
The navigation bar is a good feature and is a prominent feature of the Bootstrap website. The navigation bar serves as a responsive basic component of the navigation header in your application or website. The navigation bar is collapsed in the view of the mobile device and the navigation bar expands horizontally as the available viewport width increases. In the core of the Bootstrap navigation bar, the navigation bar includes the site name and basic navigation definition styles.
(1) The default navigation bar
The steps to create a default navigation bar are as follows:
A. Add class .navbar and .navbar-default to the <nav> tag.
B. Adding role="navigation" to the above elements will help increase accessibility.
C. Add a title class .navbar-header to the <div> element, which contains the <a> element with class navbar-brand. This will make the text look larger.
D. In order to add links to the navigation bar, you only need to simply add an unordered list with class .nav and .navbar-nav.
<nav role="navigation"> <div> <a href="#">W3Cschool</a> </div> <div> <ul> <li><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li> <a href="#">SVN</a></li> <li> <a href="#" data-toggle="dropdown"> Java <b></b> </a> <ul> <li></li> <li><a href="#">Separated link</a></li> <li></li> <li><a href="#">One separate link</a></li> </li> </li> </li> </div></nav>
(2) Responsive navigation bar
To add responsive features to the navigation bar, the content you want to collapse must be wrapped in a <div> with classes .collapse, .navbar-collapse. The collapsed navigation bar is actually a button with class .navbar-toggle and two data- elements. The first is data-toggle, which tells JavaScript what to do with the button, and the second is data-target, which indicates which element to switch to. Three <span> with class .icon-bar creates the so-called burger button. These will switch to elements in .nav-collapse <div>. To achieve these functions, you must include the Bootstrap Collapse plug-in.
<nav role="navigation"> <div> <button type="button" data-toggle="collapse" data-target="#example-navbar-collapse"> <span>Switch navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#">W3Cschool</a> </div> <div id="example-navbar-collapse"> <ul> <li><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li> <a href="#" data-toggle="dropdown"> Java <b></b> </a> <ul> <li><a href="#">jmeter</a></li> <li></li> <li><a href="#">separated link</a></li> <li></li> <li><a href="#">another separate link</a></li> </li></ul></div></nav>
(3) Forms in the navigation bar
The form in the navigation bar does not use the default class mentioned in the Bootstrap form chapter, it uses the .navbar-form class. This ensures proper vertical alignment of the form and the behavior of folding in a narrower viewport. Use the alignment options (this will be explained in detail in the Component Alignment section) to decide where the contents in the navigation bar are placed.
<nav role="navigation"> <div> <a href="#">W3Cschool</a> </div> <div> <form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Submit</button> </form> </div></nav>
(4) Buttons in the navigation bar
You can use class .navbar-btn to add a button to the <button> element that is not in <form>, which is vertically centered on the navigation bar. .navbar-btn can be used on the <a> and <input> elements. Don't use .navbar-btn on <a> elements inside .navbar-nav, because it is not a standard button class.
<nav role="navigation"> <div> <a href="#">W3Cschool</a> </div> <div> <form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Submit button</button> </form> <button type="button">Navigation bar button</button> </div></nav>
(5) Text in the navigation bar
If you need to include text strings in your navigation, use class .navbar-text. This is usually used with <p> tags, ensuring proper leading and color.
<nav role="navigation"> <div> <a href="#">W3Cschool</a> </div> <div> <p>Signed in as Thomas</p> </div></nav>
(6) Non-navigation link
If you don't want to use standard links within the regular navigation bar navigation component, use class navbar-link to add appropriate colors to the default and inverted navigation bar options.
<nav role="navigation"> <div> <a href="#">W3Cschool</a> </div> <div> <p>Signed in as <a href="#">Thomas</a> </p></div></div>
(7) Component alignment
You can use the utility class .navbar-left or .navbar-right to align the navigation links, forms, buttons, or text components in the navigation bar left or right. Both classes add CSS floats in the specified direction.
(8) Fixed to the top
The Bootstrap navigation bar can be dynamically located. By default, it is a block-level element, which is positioned based on the location placed in HTML. With some helper classes, you can place it at the top or bottom of the page, or you can make it a static navigation bar that scrolls along with the page. If you want the navigation bar to be pinned to the top of the page, add class .navbar-fixed-top to the .navbar class. The following example demonstrates this: To prevent the navigation bar from interleaving with the top of other content in the body of the page, add at least 50 pixels of padding to the <body> tag, and the value of the padding can be set according to your needs.
<nav role="navigation">
</nav>
(9) Fixed to the bottom
If you want the navigation bar to be pinned to the bottom of the page, add class .navbar-fixed-bottom to the .navbar class.
<nav role="navigation"></nav>
(10), static top
To create a navigation bar that scrolls along with the page, add .navbar-static-top class. This class does not require that the padding be added to <body>.
<nav role="navigation">
</nav>
(11), inverted navigation bar
To create an inverted navigation bar with black background white text, simply add .navbar-inverse class to the .navbar class, as shown in the following example:
To prevent the navigation bar from interleaving with the top of other content in the body of the page, add at least 50 pixels of padding to the <body> tag, and the value of the padding can be set according to your needs.
<nav role="navigation"></nav>
8. Bootstrap Breadcrumbs
Breadcrumbs is a display method based on website-level information. Take a blog as an example, breadcrumb navigation can display a release date, category, or tag. They represent the location of the current page within the navigation hierarchy.
Breadcrumbs in Bootstrap is a simple unordered list with .breadcrumb class. The delimiter will be automatically added via the class shown below in CSS (bootstrap.min.css):
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li>November</li>
</ol>
9. Bootstrap Pagination
(1) Pagination is an unordered list. Bootstrap handles pagination like other interface elements.
(2) Page turn (Pager)
If you want to create a simple paging link to provide navigation for users, it can be done by turning the page. Like paging links, page turn is also an unordered list. By default, the link is centered. The following table lists the class that Bootstrap handles page turn.
10. Bootstrap tags
Bootstrap tag. Tags can be used for counting, prompting, or other marking display on the page. You can use the modified class label-default, label-primary, label-success, label-info, label-warning, label-danger to change the appearance of the label.
<span>Default Tag</span>
<span>Main Tags</span>
<span>Success Tag</span>
<span>Information tag</span>
<span>Warning Tags</span>
<span>Hazard tag</span>
11. Bootstrap Badges
(1) The badge is similar to the label, the main difference is that the corners of the badge are smoother.
Badges are mainly used to highlight new or unread items. To use badges, just add <span> to links, Bootstrap navigation and other elements. When there are no new or unread items, the badge will be folded through the :empty selector of CSS to indicate that there is no content inside.
<a href="#">Mailbox <span>50</span></a>
(2) Activate navigation status
You can place badges in the capsule navigation and list navigation in the active state. Activate the link by using <span>.
<h4>Activation status in capsule navigation</h4><ul> <li><a href="#">Homepage<span>42</span></a></li> <li><a href="#">Introduction</a></li> <li><a href="#">Message<span>3</span></a></li></ul>
12. Bootstrap super large screen (Jumbotron)
Super large screen (Jumbotron). As the name implies, this component can increase the size of the title and add more margins to the login page content. The steps to use a Jumbotron are as follows:
A. Create a container <div> with class .jumbotron.
B. In addition to the larger <h1>, the font-weight font-weight is reduced to 200px.
<div> <div> <h1>Welcome to log in! </h1> <p>This is an instance of a Jumbotron. </p> <p><a role="button"> Learn more</a> </p> </div></div>
To get a huge screen that takes up all width without rounded corners, use the .jumbotron class outside of all .container class.
13. Bootstrap page title (Page Header)
Page Header is a good feature, which adds appropriate spacing around the page title. The page title function is particularly useful when there are multiple titles in a web page and a certain spacing needs to be added between each title. To use the Page Header, place your title in a <div> with class .page-header:
<div> <h1>Page Title Example<small>Subtitle</small> </h1></div>
14. Bootstrap thumbnail
(1) Bootstrap thumbnail. Most sites need to layout images, videos, text, etc. in a grid. Bootstrap provides an easy way to do this with thumbnails. The steps to create thumbnails using Bootstrap are as follows:
A. Add a <a> tag with class .thumbnail around the image.
B. This will add four pixel padding and a gray border.
C. When the mouse hovers over the image, the outline of the image will be displayed.
<div> <a href="#"> <img src="/wp-content/uploads/2014/06/kittens.jpg" > </a></div>
(2) Add custom content
Now that we have a basic thumbnail, we can add various HTML content to the thumbnail, such as titles, paragraphs, or buttons. The specific steps are as follows:
A. Change the <a> tag with class .thumbnail to <div>.
B. In this <div>, you can add anything you want to add. Since this is a <div>, we can use the default span-based naming rules to resize.
C. If you want to group multiple images, place them in an unordered list, and each list item floats to the left.
15. Bootstrap warning (Alerts)
Alerts and the class provided by Bootstrap for warnings. Alerts provides users with a way to define message styles. They provide contextual information feedback for typical user operations. You can add an optional close button to the warning box. To create an inline cancelable warning box, use the Alerts jQuery plugin.
You can add a basic warning box by creating a <div> and adding one of a .alert class and four context classes (i.e. .alert-success, .alert-info, .alert-warning, .alert-danger).
<div>Success! The submission was done very well. </div>
<div>Information! Please note this information. </div>
<div>Warning! Please do not submit. </div>
<div>Error! Please make some changes. </div>
(1) Cancellable warning (Dismissal Alerts)
The steps to create a cancelable warning (Dismissal Alert) are as follows:
A. Add a basic warning box by creating a <div> and adding one of the .alert class and four context classes (i.e. .alert-success, .alert-info, .alert-warning, .alert-danger).
B. At the same time, add an optional .alert-dismissable to the above <div> class.
C. Add a close button.
<div> <button type="button" data-dismiss="alert" aria-hidden="true"> × </button> Success! The submission was done very well. </div>
(2) Links in Alerts
The steps to create a link in Alerts are as follows:
A. Add a basic warning box by creating a <div> and adding one of the .alert class and four context classes (i.e. .alert-success, .alert-info, .alert-warning, .alert-danger).
B. Use the .alert-link entity class to quickly provide links with matching colors.
<div>
<a href="#">Success! The submission was done very well. </a>
</div>
16. Bootstrap progress bar
This chapter will explain the Bootstrap progress bar. In this tutorial, you will see how to use Bootstrap to create progress bars for loading, redirecting, or action states.
The Bootstrap progress bar uses CSS3 transitions and animations to get this effect. Internet Explorer 9 and previous versions and older versions of Firefox do not support this feature, and Opera 12 does not support animations.
(1) The default progress bar
The steps to create a basic progress bar are as follows:
A. Add a <div> with class .progress.
B. Next, add an empty <div> with class .progress-bar in the above <div>.
C. Add a style attribute with a width represented by percentage, such as style="60%"; to indicate that the progress bar is at 60%.
<div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>40% Complete</span> </div></div>
(2) Alternating progress bar
The steps to create progress bars of different styles are as follows:
A. Add a <div> with class .progress.
B. Next, in the above <div>, add an empty <div> with class .progress-bar and class progress-bar-*. Among them, * can be success, info, warning, danger.
C. Add a style attribute with a width represented by percentage, such as style="60%"; to indicate that the progress bar is at 60%.
<div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" > <span>90% Completed (successful)</span> </div></div>
(3) The progress bar of stripes
The steps to create a streak progress bar are as follows:
A. Add a <div> with class .progress and .progress-striped.
B. Next, in the above <div>, add an empty <div> with class .progress-bar and class progress-bar-*. Among them, * can be success, info, warning, danger.
C. Add a style attribute with a width represented by percentage, such as style="60%"; to indicate that the progress bar is at 60%.
<div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" > <span>90% Completed (successful)</span> </div></div>
(4) The progress bar of the animation
The steps to create an animation progress bar are as follows:
A. Add a <div> with class .progress and .progress-striped. Also add class .active.
B. Next, add an empty <div> with class .progress-bar in the above <div>.
C. Add a style attribute with a width represented by percentage, such as style="60%"; to indicate that the progress bar is at 60%.
This will give the stripes a sense of movement from right to left.
<div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" > <span>40% Complete</span> </div></div>
(5) Stacked progress bar
You can even stack multiple progress bars. You can stack multiple progress bars in the same .progress.
17. Bootstrap multimedia object (Media Object)
Multimedia Object in Bootstrap (Media Object). These abstract object styles are used to create various types of components (such as blog comments). We can use graphic and text mixing in components, and the images can be left or right aligned. Media objects can use less code to achieve the mixed arrangement of media objects and text.
The lightweight tagging and easy-to-scaling properties of media objects are achieved by applying class to simple tags. You can add the following two forms to the HTML tag to set up the media object:
A. media: This class allows the multimedia (image, video, audio) in the media object to float to the left or right of the content block.
B. media-list: If you need a list, each item is part of an unordered list, you can use this class. Can be used for comment lists and article lists.
<div> <a href="#"> <img src="/wp-content/uploads/2014/06/64.jpg" > </a> <div> <h4>Media Title</h4> Here are some sample text. Here are some sample text. </div></div>
18. Bootstrap list group
List components are used to render complex and custom content in list form. The steps to create a basic list group are as follows:
A. Add class .list-group to element <ul>.
B. Add class .list-group-item to <li>.
<ul> <li>Free domain name registration</li> <li>Free Window space hosting</li></ul>
(1) Add badge to the list group
We can add a badge component to any list item, which will automatically be positioned to the right. Just add <span> to the <li> element.
<ul> <li>Free domain name registration</li> <li><span>New</span> 24*7 Support</li></ul>
(2) Add link to the list group
By using anchor tags instead of list items, we can add links to list groups. We need to use <div> instead of <ul> element.
<a href="#">24*7 Support</a>
<a href="#">Free Window Space Hosting</a>
(3) Add custom content to the list group
We can add any HTML content to the list group that has been added to the link above.
19. Bootstrap panels (Panels)
Bootstrap panels (Panels). The panel assembly is used to insert the DOM assembly into a box. To create a basic panel, just add class .panel and class .panel-default to the <div> element,
<div> <div> This is a basic panel</div></div>
(1) Panel title
We can add panel titles in two ways:
A. Using .panel-heading class can easily add a title container to the panel.
B. Use <h1>-<h6> with .panel-title class to add the title of the predefined style.
<div> <div>Platform title without title</div> <div>Platform content</div></div>
(2) Panel footnotes
We can add footnotes to the panel, just put the button or the subtext in the <div> with class .panel-footer.
<div> <div>This is a basic panel</div> <div>Panboard footnote</div></div>
(3) Panel with contextual color
Use the context state classes panel-primary, panel-success, panel-info, panel-warning, and panel-danger to set up a panel with contextual colors.
<div> <div> <h3>Platform Title</h3> </div> <div> This is a basic panel</div></div>
(4) Panel with table
To create a borderless table in the panel, we can use class .table in the panel. Assuming there is a <div> containing .panel-body, we can add additional borders to the top of the table to separate it. If there is no <div> containing .panel-body, the component moves from the panel head to the table without interruption.
<div> <div> <h3>Platform Title</h3> </div> <div>This is a basic panel</div> <table> <th>Product</th><th>Price</th> <tr><td>Product A</td><td>200</td></tr> <tr><td>Product B</td><td>400</td></tr> </table></div>
(5) Panel with list group
We can include list groups in any panel, create panels by adding .panel and .panel-default classes in the <div> element, and add list groups in the panel.
<div> <div>Platform Title</div> <div> <p>This is a basic panel content. </p> </div> <ul> <li>Free domain name registration</li> <li>Annual update cost</li> </ul></div>
20. Bootstrap Well
Well is a container that causes a dent or illustration effect to the content <div>. To create a Well, simply put the content in a <div> with a class .well.
<div>Hello, I'm in Well! </div>
(1) Size
You can use the optional classes well-lg or well-sm to change the size of the Well. These two classes are used in conjunction with the .well class. These two classes affect padding, and depending on the class used, Well will appear larger or smaller.
<div>Hello, I'm in the big Well! </div>
<div>Hello, I'm in the little Well! </div>
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.