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

最新推荐文章于 2024-08-23 11:17:12 发布
最新推荐文章于 2024-08-23 11:17:12 发布
阅读量3.4k 收藏 3
点赞数
分类专栏： bootstrap 文章标签： 表单和图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40680190/article/details/80733249
版权
  • 小图标组件
    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>

     
Bootstrap学习笔记——导航条、分页导航
gengfu_php的博客
10-05 3598
1 导航条导航条（navbar）比航（nav）复杂很多；导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。1.1 基础导航条1、在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”; 2、：在列表外部添加带有类“navbar”和“navbar-default”容器（div）。<div
Bootstrap v3 学习笔记 —— 组件
cccloveforever的博客
04-06 988
Bootstrap 自带了大量可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
为 Bootstrap 添加更多自定义图标
fendou4533的专栏
06-25 2277
转  http://www.lovelucy.info/custom-icons-for-twitter-bootstrap.html
Bootstrap带图标的按钮样式
12-13
这是一款基于bootstrap的带图标的按钮样式。这组按钮在bootstrap按钮的基础上，通过附加的HTML元素来构建小图标，并通过CSS3来制作鼠标hover动画效果。
Bootstrap 下拉菜单（Dropdown）插件
最新发布
lwx666sl的博客
08-23 513
这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。如果您想要单独引用该插件的功能，那么您需要引用。或者，正如一章中所提到，您可以引用或压缩版的。
Bootstrap图标
weixin_33737134的博客
07-01 640
前面的话 　　小图标icon是一个优秀Web中不可缺少的一部分，起到画龙点睛的效果。在Bootstrap框架中也为大家提供了250多个不同的icon图片。本文将详细介绍Bootstrap图标   原理分析 　　Bootstrap框架中的图标都是字体图标，其实现原理就是通过@font-face属性加载了字体 @font-face { font-family: 'Glyphicons ...
Bootstrap图标按钮
qq_45298704的博客
03-06 2164
BootStrap官方为我们准备了很多图标按钮，链接如下： https://v3.bootcss.com/components/ 我们使用时注意:用span包裹图标，再嵌入到图标中 <button class="btn btn-info"> <span class="glyphicon glyphicon-fullscreen"> </span> 想跟在图标后的字 </button> ...
bootstrap EF_Bootstrap Icons - bootstrap专用的漂亮图标库，可以免费商用
weixin_39889642的博客
10-28 373
专门为著名的前端开发 UI 框架 Bootstrap 的组件和文档定制开发的图标库。 介绍Bootstrap 图标库 的设计初衷是与 Bootstrap 组件配合使用，从表单到导航组件等。Bootstrap 图标库 全部是 SVG 文件格式，能够轻松快捷地进行缩放，保证清晰，并可以通过 CSS 设置颜色。虽然 Bootstrap 图标库 是为 Bootstrap 而开发的，但也可以应用在任何项目。...
【Java 进阶篇】深入了解 Bootstrap 按钮和图标
繁依Fanyi的博客
10-20 1671
按钮是网页上的交互元素，通常用于触发某种操作或链接到其他页面。Bootstrap 提供了一系列按钮样式，使按钮看起来更漂亮、一致且易于使用。这些按钮样式包括不同的颜色、尺寸和状态。图标是网页设计的重要组成部分，它们用于增强用户界面的可视效果和交互性。Bootstrap 内置了一组常用图标，可以直接在按钮、链接、文本等元素中使用。尽管 Bootstrap 提供了丰富的图标库，但有时您可能需要使用自定义图标。您可以通过导入其他图标库或使用自己的图标来实现这一目标。
Bootstrap组件学习笔记（一）——大纲、Glyphicons字体图标和下拉菜单
Andy_lau
08-21 706
目录：     1.组件学习大纲     2.Glyphicons字体图标     3.下拉菜单 1.组件学习大纲       2.Glyphicons字体图标      bootstrap含有接近250多个字体图标（图标表格地址：http://v3.bootcss.com/components/#glyphic
Bootstrap v3 学习笔记 —— 全局 CSS 样式
cccloveforever的博客
04-05 1646
Bootstrap v3 设置全局的 CSS 样式。
基于bootstrap图标形状单选按钮radio
06-15
基于bootstrap的单选按钮图标 改变了浏览器自带形状，支持自定义图标
bootstrap文件及bootstrap图标大全
05-05
内有bootstrap文件在resource里，版本3.3.7 demo文件里是html文件，里面有bootstrap的图标大全
Bootstrap 字体图标(Glyphicons)
01-19
Bootstrap 字体图标(Glyphicons) @font-face { font-family:’Glyphicons Halflings’;src:url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot);src:url(//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/fonts/glyphicons-halflings-regular.eot?#iefix) format(’embedded-opentype’),url
Bootstrap学习笔记（三）组件
kun的博客
12-05 1015
1、复习总结：全局CSS样式： 按钮  .btn .btn-default 图片  .img-rounded  .img-circle  .img-thumbnail  .img-responsive 文本  .text-五种  .bg-五种  .text-left/right/center/justify 排版和代码   .list-unstyled   .list-inline 表格...
【Bootstrap学习笔记】3.图标菜单按钮组件
sunraito的博客
08-14 775
快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q 插入链接 Ctrl + L 插入代码 Ctrl + K 插入图片 Ctrl + G 提升标题 Ctrl + H 有序列表 Ctrl + O 无序列表 Ctrl + U 横线 Ctrl + R 撤销 Ctrl + Z 重做 Ctrl + Y...
Bootstrap框架(图标)
weixin_33859844的博客
01-23 689
Glyphicons 字体图标 所有可用的图标 包括250多个来自 Glyphicon Halflings 的字体图标。GlyphiconsHalflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为Glyphicons添加一个友情链接。 例：用作静态控件的组件作为模板 添加图标颜色，在原来代码的基...
Bootstrap-按钮（参考H+提供的，按钮样式和代码）
qq_54015925的博客
12-07 4720
btn btn-primary样式：蓝色（我感觉是绿色，但是查了一些资料都说是蓝色），提供额外的视觉感，可在一系列按钮中指出主要操作。btn btn-link样式：浅蓝色，简化一个按钮，是他看起来像一个连接同时保持按钮的行为。btn btn-success样式：浅蓝色（个人觉得：浅蓝色），可作为默认样式的代替样式。btn btn-block样式：使按钮设置为块样式，+lg样式可填充满整个父容器。btn btn-info样式：绿色（个人觉得：天蓝色），标识成功或积极的动作。以第一种为例，其余的修改对应的。
Bootstrap菜单按钮图标组件详解
"这篇文章主要介绍了Bootstrap中的菜单按钮图标组件，包括小图标组件、下拉菜单组件和按钮组组件。Bootstrap是流行的前端框架，基于HTML、CSS和JavaScript，用于加速Web开发。" 在Web开发中，Bootstrap框架极大地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值