bootstrap学习笔记——07——图标菜单按钮组件

其他 2018-06-23 12:13:24 阅读次数: 2
  • 小图标组件
    Bootstrap提供了免费的263个小图标,具体可以参考中文官网的组件链接：
    http://v3.bootcss.com/components/#glyphicons  。部分图标如下：
                                              部分图标

    可以使用<i>或<span>标签来配合使用，具体如下：
    //使用小图标
     <i class=  " glyphicon glyphicon-star"></i>
       <span class="glyphicon glyphicon-star"></span>
    //也可以结合按钮
        <button class="btn   btn-default  btn-lg">
          <i class=  " glyphicon glyphicon-star"></i>
        </button>
     <button class="btn   btn-default  btn">
          <i class=  " glyphicon glyphicon-star"></i>
        </button>
     <button class="btn   btn-default  btn-sm">
          <i class=  " glyphicon glyphicon-star"></i>
        </button>
     <button class="btn   btn-default  btn-xs">
          <i class=  " glyphicon glyphicon-star"></i>
        </button>
  • 下拉菜单组件
    下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。
    //基本格式
     <div class="dropdown  ">
                 <button class=" btn btn-default"    data-toggle="dropdown">
                   下拉菜单<span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu">
                   <li><a href="#">首页</a></li>
                   <li><a href="#">资讯</a></li>
                   <li><a href="#">产品</a></li>
                   <li><a href="#">关于</a></li>
                 </ul>


               </div>
    按钮和菜单需要包裹在.dropdown的容器里，而作为被点击的元素按钮需要设置data-toggle="dropdown"才能有效。对于菜单部分，设置class="dropdown-menu"才能自动隐藏并添加固定样式。设置class="caret"表示箭头，可上可下。
        //设置向上触发
    <div class="dropup"></div>
    <div class="dropup  open">
                  <button class=" btn btn-default"    data-toggle="dropup">
                   下拉菜单<span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu">
                   <li><a href="#">首页</a></li>
                   <li><a href="#">资讯</a></li>
                   <li><a href="#">产品</a></li>
                   <li><a href="#">关于</a></li>
                 </ul>
               </div>
    注：如果想菜单默认是打开的加一个open  在外面的div中.
    不过需要注意的是，如果你点击按钮。没有展开下拉菜单，请看看你的js加载顺序是否正确
     <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>，
    data-toggle 然后看看是否有此属性。

       //菜单项居右对齐，默认值是dropdown-menu-left
    <ul class="dropdown-menu  dropdown-menu-right">
    //设置菜单的标题，不要加超链接
    <li  class="dropdown-header">网站导航</li>
    //设置菜单的分割线
    <li class="divider"></li>
    //设置菜单的禁用项
    <li  class="disabled"><a  href="#">试试</a></li>

    //让菜单默认显示
    <div class="dropdown  open">
  • 按钮组组件
    按钮组就是多个按钮集成在一个容器里形成独有的效果。
    //基本格式
    <div class="btn-group">
            <button  type="button" class="btn btn-default  ">左</button>   
            <button  type="button" class="btn btn-default  ">中</button>   
            <button  type="button" class="btn btn-default  ">右</button>   
        </div>

    //将多个按钮组整合起来便于管理
     <div class="btn-toolbar">
                 <div class="btn-group">
                    <button  type="button" class="btn btn-default  ">左</button>   
                    <button  type="button" class="btn btn-default  ">中</button>   
                    <button  type="button" class="btn btn-default  ">右</button>   
                </div> 


                <div class="btn-group">
                    <button  type="button" class="btn btn-default  ">1</button>   
                    <button  type="button" class="btn btn-default  ">2</button>   
                    <button  type="button" class="btn btn-default  ">3</button>   
                </div> 
           </div>

    //设置按钮组大小
    <div class="btn-group  btn-group-lg">最大</div>
        <div class="btn-group  ">正常</div>
        <div class="btn-group  btn-group-sm">小</div>
        <div class="btn-group  btn-group-xs">最小</div>

    //嵌套一个分组，比如下拉菜单
     <div class="btn-group  ">
                    <button  type="button" class="btn btn-default  ">左</button>   
                    <button  type="button" class="btn btn-default  ">中</button>   
                    <button  type="button" class="btn btn-default  ">右</button>   
                      <div class="btn-group">
                           <a class=" btn btn-default   dropdown-toggle"    data-toggle="dropdown">
                             下拉菜单<span class="caret"></span>
                           </a>
                         <ul class="dropdown-menu   ">
                            <li class="dropdown-header">网址导航</li>
                            <li class="divider"></li>
                           <li ><a href="#">首页</a></li>
                           <li><a href="#">资讯</a></li>
                           <li><a href="#">产品</a></li>
                           <li  ><a href="#">关于</a></li>
                           <li  class="disabled"><a  href="#">试试</a></li>
                         </ul>
                     </div>
                </div> 
    注意：这里<div>中并没有实现class="dropdown",通过源码分析知道嵌套本身已经有定位就不需要再设置。而右边的圆角只要多加一个class="dropdown-toggle"即可。



    //设置按钮组垂直排列
    <div class="btn-group-vertical"></div>
    <div class="btn-group  btn-group-vertical ">
                    <button  type="button" class="btn btn-default  ">左</button>   
                    <button  type="button" class="btn btn-default  ">中</button>   
                    <button  type="button" class="btn btn-default  ">右</button>   
                      <div class="btn-group">
                           <a class=" btn btn-default   dropdown-toggle"    data-toggle="dropdown">
                             下拉菜单<span class="caret"></span>
                           </a>
                         <ul class="dropdown-menu   ">
                            <li class="dropdown-header">网址导航</li>
                            <li class="divider"></li>
                           <li ><a href="#">首页</a></li>
                           <li><a href="#">资讯</a></li>
                           <li><a href="#">产品</a></li>
                           <li  ><a href="#">关于</a></li>
                           <li  class="disabled"><a  href="#">试试</a></li>
                         </ul>
                     </div>
                </div>

    //设置两端对齐按钮组，使用<a>标签
    <div class="btn-group-justified">
                    <a type="button" class=" btn btn-default">左</a>
                    <a type="button" class=" btn btn-default">中</a>
                    <a type="button" class=" btn btn-default">右</a>
                </div>

    //如果需要使用<button>标签，则需要对每个按钮进行群组
     <div class="btn-group-justified">
                    <div class="btn-group">
                       <button type="button" class=" btn btn-default">左</button>
                    </div>
                     <div class="btn-group">
                      <button type="button" class=" btn btn-default">中</button>
                    </div>
                     <div class="btn-group">
                      <button type="button" class=" btn btn-default">右</buttona>
                    </div>  
                </div>


  • 按钮式下拉菜单
    这个下拉菜单其实和第二个知识点一样，只不过，这个是在群组里，不需要<div>声明class="dropdown"。
    //群组按钮下拉菜单
       <div class="btn-group">
                          <a class=" btn btn-default   dropdown-toggle"    data-toggle="dropdown">
                            下拉菜单<span class="caret"></span>
                          </a>
                        <ul class="dropdown-menu   ">
                           <li class="dropdown-header">网址导航</li>
                           <li class="divider"></li>
                          <li ><a href="#">首页</a></li>
                          <li><a href="#">资讯</a></li>
                          <li><a href="#">产品</a></li>
                          <li  ><a href="#">关于</a></li>
                          <li  class="disabled"><a  href="#">试试</a></li>
               
                        </ul>
                    </div>
        
    //分裂式按钮下拉菜单
    <div class="btn-group">
                          <a class=" btn btn-default ">下拉菜单</a>
                          <a class=" btn btn-default   dropdown-toggle"    data-toggle="dropdown">
                            <span class="caret"></span>
                          </a>
                        <ul class="dropdown-menu   ">
                           <li class="dropdown-header">网址导航</li>
                           <li class="divider"></li>
                          <li ><a href="#">首页</a></li>
                          <li><a href="#">资讯</a></li>
                          <li><a href="#">产品</a></li>
                          <li  ><a href="#">关于</a></li>
                          <li  class="disabled"><a  href="#">试试</a></li>
               
                        </ul>
                    </div>

    //向上弹出式
    <div  class="btn-group dropup">
  • 练习代码
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
      <meta    name="viewport"     content="width=device-width,initial-scale=1,maximun-scale=1,user-scalable=no" >
      <!--                      视图窗口                            宽度=设备的宽度         初始化大小为1 100%      最大为1         禁止用户缩放 -->
	<title>图标菜单按钮组件</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">

       <style>
          .a {
            height: 50px;
            border: 1px  solid #ccc; 
            background-color: #eee;
          }

       </style>
</head>
<body  style="margin: 50px;">

   <!-- <i class=  " glyphicon glyphicon-star"></i>
   <span class="glyphicon glyphicon-star"></span>
   
    <button class="btn   btn-default  btn-lg">
      <i class=  " glyphicon glyphicon-star"></i>
    </button> -->

       <!--  <button class="btn   btn-default  btn">
             <i class=  " glyphicon glyphicon-star"></i>
           </button>
       
            <button class="btn   btn-default  btn-sm">
             <i class=  " glyphicon glyphicon-star"></i>
           </button>
       
           <button class="btn   btn-default  btn-xs">
             <i class=  " glyphicon glyphicon-star"></i>
           </button> -->
<!-- 
           <div class="dropdown">
             <button class=" btn btn-default"    data-toggle="dropdown">
               下拉菜单<span class="caret"></span>
             </button>
             <ul class="dropdown-menu">
               <li><a href="#">首页</a></li>
               <li><a href="#">资讯</a></li>
               <li><a href="#">产品</a></li>
               <li><a href="#">关于</a></li>
             </ul>
           </div> -->

       <!--      <div class="dropdown">
        <a class=" btn btn-default"    data-toggle="dropdown">
          下拉菜单<span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">首页</a></li>
          <li><a href="#">资讯</a></li>
          <li><a href="#">产品</a></li>
          <li><a href="#">关于</a></li>
        </ul>
                  </div> -->

          <!--  <div class="dropup  open">
             <button class=" btn btn-default"    data-toggle="dropdown">
              下拉菜单<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">首页</a></li>
              <li><a href="#">资讯</a></li>
              <li><a href="#">产品</a></li>
              <li><a href="#">关于</a></li>
            </ul>
          </div> -->

          <!--   <div class="dropdown">
           <a class=" btn btn-default"    data-toggle="dropdown">
             下拉菜单<span class="caret"></span>
           </a>
           <ul class="dropdown-menu   dropdown-menu-right">
             <li  class="dropdown-header"><a href="#">首页</a></li>
             <li><a href="#">资讯</a></li>
             <li><a href="#">产品</a></li>
             <li><a href="#">关于</a></li>
           </ul>
                     </div> -->

           <!--  <div class="dropdown">
            <a class=" btn btn-default"    data-toggle="dropdown">
              下拉菜单<span class="caret"></span>
            </a>
            <ul class="dropdown-menu   ">
               <li class="dropdown-header">网址导航</li>
               <li class="divider"></li>
              <li ><a href="#">首页</a></li>
              <li><a href="#">资讯</a></li>
              <li><a href="#">产品</a></li>
              <li  ><a href="#">关于</a></li>
              <li  class="disabled"><a  href="#">试试</a></li>
           
            </ul>
                      </div> -->

<!--     <div class="btn-group">
    <button  type="button" class="btn btn-default  ">左</button>   
    <button  type="button" class="btn btn-default  ">中</button>   
    <button  type="button" class="btn btn-default  ">右</button>   
</div> -->


<!-- <button  type="button" class="btn btn-default  ">左</button>   
            <button  type="button" class="btn btn-default  ">中</button>   
            <button  type="button" class="btn btn-default  ">右</button>   


       <div class="btn-toolbar">
             <div class="btn-group   btn-group-lg">
                <button  type="button" class="btn btn-default  ">左</button>   
                <button  type="button" class="btn btn-default  ">中</button>   
                <button  type="button" class="btn btn-default  ">右</button>   
            </div> 

            <div class="btn-group">
                <button  type="button" class="btn btn-default  ">1</button>   
                <button  type="button" class="btn btn-default  ">2</button>   
                <button  type="button" class="btn btn-default  ">3</button>   
            </div> 

       </div> -->
    
   <!--  <div class="btn-group  btn-group-lg">最大</div>
   <div class="btn-group  ">正常</div>
   <div class="btn-group  btn-group-sm">小</div>
   <div class="btn-group  btn-group-xs">最小</div> -->



     <!--   <div class="btn-group  ">
            <button  type="button" class="btn btn-default  ">左</button>   
            <button  type="button" class="btn btn-default  ">中</button>   
            <button  type="button" class="btn btn-default  ">右</button>   
              <div class="btn-group">
                   <a class=" btn btn-default   dropdown-toggle"    data-toggle="dropdown">
                     下拉菜单<span class="caret"></span>
                   </a>
                 <ul class="dropdown-menu   ">
                    <li class="dropdown-header">网址导航</li>
                    <li class="divider"></li>
                   <li ><a href="#">首页</a></li>
                   <li><a href="#">资讯</a></li>
                   <li><a href="#">产品</a></li>
                   <li  ><a href="#">关于</a></li>
                   <li  class="disabled"><a  href="#">试试</a></li>
          
                 </ul>
             </div>
        </div> -->


           <!--  <div class="btn-group  btn-group-vertical ">
               <button  type="button" class="btn btn-default  ">左</button>   
               <button  type="button" class="btn btn-default  ">中</button>   
               <button  type="button" class="btn btn-default  ">右</button>   
                 <div class="btn-group">
                      <a class=" btn btn-default   dropdown-toggle"    data-toggle="dropdown">
                        下拉菜单<span class="caret"></span>
                      </a>
                    <ul class="dropdown-menu   ">
                       <li class="dropdown-header">网址导航</li>
                       <li class="divider"></li>
                      <li ><a href="#">首页</a></li>
                      <li><a href="#">资讯</a></li>
                      <li><a href="#">产品</a></li>
                      <li  ><a href="#">关于</a></li>
                      <li  class="disabled"><a  href="#">试试</a></li>
           
                    </ul>
                </div>
           </div>  -->

            <!-- <div class="btn-group-vertical"></div> -->

     <!--        <div class="btn-group-justified">
         <a type="button" class=" btn btn-default">左</a>
         <a type="button" class=" btn btn-default">中</a>
         <a type="button" class=" btn btn-default">右</a>
     </div>
      -->

           <!--  <div class="btn-group-justified">
               <div class="btn-group">
                  <button type="button" class=" btn btn-default">左</button>
               </div>
                <div class="btn-group">
                 <button type="button" class=" btn btn-default">中</button>
               </div>
                <div class="btn-group">
                 <button type="button" class=" btn btn-default">右</buttona>
               </div>  
           </div> -->



                 <div class="btn-group">
                      <a  class=" btn btn-default  " >下拉菜单</a>
                      <a class=" btn btn-default   dropdown-toggle"    data-toggle="dropdown">
                        <span class="caret"></span>
                      </a>
                    <ul class="dropdown-menu   ">
                       <li class="dropdown-header">网址导航</li>
                       <li class="divider"></li>
                      <li ><a href="#">首页</a></li>
                      <li><a href="#">资讯</a></li>
                      <li><a href="#">产品</a></li>
                      <li  ><a href="#">关于</a></li>
                      <li  class="disabled"><a  href="#">试试</a></li>
           
                    </ul>
                </div>

                

          <script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	
</body>
</html>


猜你喜欢

转载自blog.csdn.net/qq_40680190/article/details/80733249
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022