组件

Posted pcbullprogrammer

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了组件相关的知识，希望对你有一定的参考价值。

  • 组件

  1. Glyphicons 字体图标

    <h2><span class="glyphicon glyphicon-hand-left"></span>你好！</h2>

    截图：
    技术图片

  2. 下拉菜单：

    <div class="dropdown">
    <button class="btn btn-danger" data-toggle="dropdown">更多<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li> <a>百度</a></li>
        <li> <a>百度</a></li>
        <li> <a>百度</a></li>
        <li> <a>百度</a></li>
    </ul>
</div>

    截图：
    技术图片

  3. 上拉菜单

    <div class="dropup">
    <button class="btn btn-danger" data-toggle="dropdown">更多<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li> <a>百度</a></li>
        <li> <a>百度</a></li>
        <li> <a>百度</a></li>
        <li> <a>百度</a></li>
    </ul>
</div>

     

  4. 菜单对齐 
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

<ul class="dropdown-menu dropdown-menu-left" aria-labelledby="dLabel">
  ...
</ul>

     

  5. 菜单标题 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

     

  6. 菜单分割线 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

     

  7. 禁用菜单项 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

     

  8. 按钮组：一组按钮 
    <div class="btn-group" >
  <button class="btn btn-default">Left</button>
  <button class="btn btn-default">Middle</button>
  <button class="btn btn-default">Right</button>
</div>

     

  9. 按钮组工具栏 
    <div class="btn-toolbar" >
  <div class="btn-group" >...</div>
  <div class="btn-group" >...</div>
  <div class="btn-group" >...</div>
</div>

     

  10. 按钮组尺寸：只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。 
    <div class="btn-group btn-group-lg">...</div>
<div class="btn-group" role="group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

     

  11. 嵌套：想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。 
    <div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

     

  12. 垂直按钮组： 
    <div class="btn-group-vertical" >
  ...
</div>

     

  13. 分裂式下拉菜单 
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--没有压缩的，即是没有去除空格和换行，方便学习-->
        <link rel="stylesheet" href="bs/css/bootstrap.css" />
        <!--
            压缩版的，去除了空格和换行，文件小，省带宽
        <link rel="stylesheet" href="bs/css/bootstrap.min.css" />
        
        -->
        <!--要使用bootstrap的js插件，必须有jquery的支持-->
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <!--bootstrap的主包，同样bootstrap.min.js是压缩版-->
        <script type="text/javascript" src="bs/js/bootstrap.js" ></script>
        <style>
            *{
                font-family: 微软雅黑;
            }
            img{
                background: #ccc;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1 class="page-header">BootStrap前端框架</h1>
            <div class="btn-group">
                <button class="btn btn-default">Default</button>
                <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a>百度</a></li>
                    <li><a>百度</a></li>
                    <li><a>百度</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

    截图：
    技术图片

  14.  单按钮下拉菜单

    <!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--没有压缩的，即是没有去除空格和换行，方便学习-->
        <link rel="stylesheet" href="bs/css/bootstrap.css" />
        <!--
            压缩版的，去除了空格和换行，文件小，省带宽
        <link rel="stylesheet" href="bs/css/bootstrap.min.css" />
        
        -->
        <!--要使用bootstrap的js插件，必须有jquery的支持-->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <!--bootstrap的主包，同样bootstrap.min.js是压缩版-->
        <script type="text/javascript" src="bs/js/bootstrap.js"></script>
        <style>
            * {
                font-family: 微软雅黑;
            }
            
            img {
                background: #ccc;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <h1 class="page-header">BootStrap前端框架</h1>
            <div class="btn-group">
                <button class="btn btn-default dropdown" data-toggle="dropdown">更多<span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li>
                        <a>百度</a>
                    </li>
                    <li>
                        <a>百度</a>
                    </li>
                    <li>
                        <a>百度</a>
                    </li>
                </ul>
            </div>

        </div>
    </body>

</html>

    截图：
    技术图片





以上是关于组件的主要内容，如果未能解决你的问题，请参考以下文章

如何阻止片段一直弹出到根片段？ [导航组件]

Reactreact概述组件事件

微信小程序代码片段分享

vue中的组件

使用Android导航组件时如何从后台获取片段？

无法移动到嵌套子导航组件中的父片段？