Bootstrap组件学习笔记（一）——大纲、Glyphicons字体图标和下拉菜单

最新推荐文章于 2024-06-03 20:31:46 发布

小巷下起了雨

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量706

点赞数

分类专栏： front-end(bootstrap) 文章标签： bootstrap 组件字体图标下拉菜单

本文链接：https://blog.csdn.net/qq_28057577/article/details/77461613

版权

本文介绍了Bootstrap中的Glyphicons字体图标和下拉菜单的使用方法。通过示例代码展示了如何引入和使用Bootstrap的字体图标，包括不同大小的按钮和图标间隔。同时，详细讲解了下拉菜单的实现，包括下拉菜单的多种样式和位置调整，如下弹、上弹、左对齐、右对齐等。

摘要由CSDN通过智能技术生成

1.组件学习大纲

2.Glyphicons字体图标

3.下拉菜单

1.组件学习大纲

2. Glyphicons字体图标

bootstrap含有接近250多个字体图标（图标表格地址： http://v3.bootcss.com/components/#glyphicons ），我们下载bootstrap编译好的源文件时字体保存在fonts文件夹下面,这里需要注意的是在我们引入这些图标时，要保证他的路径为 ../fonts/否则需要我们更改文件源码中的资源路径，接下来依然是使用示例。

2.1 示例代码

 
     
   
 
        
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>组件</title>
    <!--引入bootstrap样式文件-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--引入jq（必须在bootstrap.min.js文件之前）-->
    <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
    <!--引入bootstrap js-->
    <script type="application/javascript" src="js/bootstrap.min.js"></script>
</head>
<body style="margin: 40px">
    <div class="panel panel-success">
        <div class="panel-heading">
            glyphicon图标
        </div>
        <div class="panel-body">
            <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
            <hr/>
            <div class="btn-group">
                <button  type="button" class="btn  btn-success" aria-label="pre">
                    <span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>
                </button>
                <button  type="button" class="btn  btn-success" aria-label="stop">
                    <span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
                </button>
                <button  type="button" class="btn  btn-success" aria-label="next">
                    <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
                </button>
            </div>
            <hr/>
            <!--注意文本和span图标之间建议有空格，这样渲染的时候图片和文本之间会有间隔，比较美观-->
            <button  type="button" class="btn  btn-warning btn-lg" aria-label="send">
                <span class="glyphicon glyphicon-send" aria-hidden="true"></span> send
            </button>
            <button  type="button" class="btn  btn-warning btn-sm" aria-label="send">
                <span class="glyphicon glyphicon-send" aria-hidden="true"></span> send
            </button>
            <button  type="button" class="btn  btn-warning btn-xs" aria-label="send">
                <span class="glyphicon glyphicon-send" aria-hidden="true"></span> send
            </button>
        </div>