What are the components of bootstrap official website?

Bootstrap contains a wealth of Web components. Based on these components, you can quickly build a beautiful and fully functional website. It includes the following components:

Drop-down menu, button group, button drop-down menu, navigation, navigation bar, path navigation, paging, layout, thumbnail, warning dialog, progress bar, media Objects etc.

Here are some of the components demonstrated. (Recommended learning: Bootstrap video tutorial)

Dropdowns

The drop-down menu is switchable and displays links in a list format context menu. This can be achieved by interacting with the Dropdown JavaScript plugin.

If you need to use the drop-down menu, you only need to add the drop-down menu in class .dropdown. The following example demonstrates a basic drop-down menu:

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" 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="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

Navigation

They use the same markup and base class .nav. Bootstrap also provides a helper class for sharing markup and state. Changing the modified class allows you to switch between different styles.

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
  <li class="active"><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>

For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of What are the components of bootstrap official website?. For more information, please follow other related articles on the PHP Chinese website!