你不得不知道的Bootstrap基础之字体图标、导航栏（3）

最新推荐文章于 2024-05-14 09:55:02 发布
最新推荐文章于 2024-05-14 09:55:02 发布
阅读量315 收藏
点赞数
分类专栏： 日常学习 文章标签： bootstrap glyphicon nav
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41071754/article/details/109378061
版权

文章目录

Bootstrap 字体图标(Glyphicons)

Bootstrap 捆绑了 200 多种字体格式的字形。

在线定制图标：https://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm

  <span class="glyphicon glyphicon-sort-by-attributes"></span>

Bootstrap 下拉菜单（Dropdowns）

<li class="dropdown">
  	<a class="dropdown-toggle" data-toggle="dropdown" href="#">
         Java <span class="caret"></span>
     </a>
     <ul class="dropdown-menu">
         <li><a href="#">Swing</a></li>
         <li><a href="#">jMeter</a></li>
         <li><a href="#">EJB</a></li>
         <li class="divider"></li>
         <li><a href="#">分离的链接</a></li>
     </ul>
 </li>

Bootstrap 导航元素

nav ：普通导航样式
nav-pills ：胶囊导航样式
nav-stacked：垂直导航样式
nav-tabs ：基本的基于标签的导航
nav-justified：两端对齐的导航标签

Bootstrap 导航栏

navbar ：普通导航栏
navbar-inverse ： 黑色导航栏

具体练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fonts</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Bootstrap Fonts</h1>
        <p>
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-sort-by-attributes"></span>
            </button>
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
            </button>
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-sort-by-order"></span>
            </button>
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-sort-by-order-alt"></span>
            </button>
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-ok"></span>
            </button>
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-phone"></span>
            </button>
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-qrcode"></span>
            </button>
        </p>
        <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-user"></span> User
        </button>
        <button type="button" class="btn btn-default btn-sm">
            <span class="glyphicon glyphicon-user"></span> User
        </button>
        <button type="button" class="btn btn-default btn-xs">
            <span class="glyphicon glyphicon-user"></span> User
        </button>
        <span class="glyphicon glyphicon-heart" style="color: rgb(255, 140, 60);"> Heart</span>
    </div>
    <br/>
    <div class="container">
        <h1>基本的胶囊式导航菜单</h1>
        <ul class="nav nav-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">SVN</a></li>
            <li><a href="#">iOS</a></li>
            <li  class="disabled"><a href="#">VB.Net（禁用链接）</a></li>
            <li><a href="#">Java</a></li>
            <li><a href="#">PHP</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Java <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Swing</a></li>
                    <li><a href="#">jMeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                </ul>
            </li>
            <li><a href="#">PHP</a></li>
        </ul>
        <br/>
        <h1>垂直的胶囊式导航菜单</h1>
        <ul class="nav nav-pills  nav-stacked">
            <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>
        <br/>
        <h1>两端对齐的导航元素</h1>
        <ul class="nav nav-tabs nav-justified">
            <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>
    </div>
    <br/>
    <div class="container">
        <h1>导航栏</h1>
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">菜鸟教程</a>
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">iOS</a></li>
                        <li><a href="#">SVN</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Java <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">jmeter</a></li>
                                <li><a href="#">EJB</a></li>
                                <li><a href="#">Jasper Report</a></li>
                                <li class="divider"></li>
                                <li><a href="#">分离的链接</a></li>
                                <li class="divider"></li>
                                <li><a href="#">另一个分离的链接</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

    </div>

    <div class="container">
        <h1>面包屑导航</h1>
        <ul class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">电气信息系</a></li>
            <li class="active">计算机17-4</li>
        </ul>
    </div>

    <script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

效果图展示

效果图展示

TomLazy
关注
专栏目录
Bootstrap导航栏实例讲解
Evankaka的专栏
10-30 1万+
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏是响应式元组件就，作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了为站点名称和基本的导航定义样式。
Bootstrap（基础）
lixiaohong2012的博客
06-30 2278
bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：<script src="https://oss.maxcdn
Bootstrap---带有字体图标的导航栏
weixin_30951743的博客
08-24 349
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>后台管理中心</title> <meta name="viewport" content="width=device-width, initial-scale=1....
bootstrap（图标,导航）
weixin_34166472的博客
06-13 257
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!-- 7 作者：15573722829@q...
swiper插件的使用
车明强的博客
11-21 185
下载4-5-2版本的压缩包，在dist文件中取出js和css文件央视放入自身项目文件夹中（值得注意的是css放入scss文件夹中无法打包，需要把css后缀改为scss） 接下来查看swiper官方演示文档步骤 swiper官方演示文档 根据需要使用文档内样式 值得一提的是css和js引入需要注意，引用的是打包好的dist文件中的 ...
bootstrap34-带有导航栏的字体图标
weixin_33857679的博客
02-07 186
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bootstrap 字体图标</title><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap...
bootstrap tutorial
最新发布
06-25
Bootstrap 提供了一套标准化的基本结构，包括全局 CSS 设置、可选的网格系统、链接到字体图标以及响应式实用工具等。这些设置可以帮助开发者快速搭建网页的基本骨架。 #### CSS 样式 Bootstrap 提供了一系列预定义...
CSS（CSS3）知识点学习
于公子的博客
03-03 8292
CSS（CSS3）自我学习，知识点总结
临摹中国慕课静态网页第二周周记（CSS3+JS）
weixin_53363646的博客
03-28 1418
临摹中国慕课静态网页第二周周记（CSS3+JS） 第二周 这周主要是对细节，轮播图，下拉菜单等地完善和JS的学习 学习内容 （1）CSS word-break 属性 属性规定自动换行的处理方法。 语法： word-break: normal|break-all|keep-all; 值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 （2）伪元素 之前都没有系统的把伪元素学习一遍，因为最多用
前端基础总结--CSS
chenyouleww的博客
07-08 560
前端 1.1前端方向 所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。 前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。 一般的我们说前端都是小前端，就是web端。 大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端 1.2前端的技术 前端能做什么？ 前端能做你上网
23种bootstrap导航菜单布局
01-08
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
11-30
首先把模板代码上上来: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <!--判断IE9 用来支持HTML5 ht
bootstrap 导航，情境，字体图标
weixin_34396902的博客
06-23 123
控件禁用 以button控件为例，下面两句都可以。效果为控件变灰，hover状态下鼠标指针变为禁止标志。 <button type="button" disabled="disabled">i'm a button</button> <button type="button" disabled=>i'm anoth...
Bootstrap----导航栏
热门推荐
weixin_52247167的博客
04-14 1万+
文章目录 一、导航栏 1、container 2、navbar 3、navbar-expand-xx 4、navbar-xxxx 5、bg-xxxx 6、navbar-brand 7、navbar-toggler 8、navbar-toggler-icon 9、定位 二、导航栏之切换触发器 1、data-toggle="xxx" 2、data-target="#id" 3、aria-controls="id" 4、aria-label 5、aria-expanded="bo.
confirm自定义按钮文字_这么漂亮的导航按钮，你会做吗？
weixin_39747293的博客
11-12 665
昨天，兰色无意中在Excel模板库中发现个很漂亮的表格(文件 -新建 -搜“减肥”下载)，其中导航按钮做的真是逼真，切换表格超方便。这么神奇的切换效果是怎么实现的？其实，如果你在切换时关注一下工作表标签，你就会发现其中的秘密：在三个表中有位置相同、形状相同、填充和字体颜色不同的导航图形，用超级链接的方法链接到对应的表格中。和点击工作表标签效果是一样的。试着移动其中一个导航，原来文字是...
五、Bootstrap之菜单栏和导航栏
Itcodewizard的博客
05-14 2279
本文主要学习 Bootstrap 中提供的菜单栏和导航栏组件的使用方法和样式，按照 Bootstrap 的规范正确构建菜单栏和导航栏的 HTML 结构。Bootstrap 类：熟悉并正确应用 Bootstrap 的类名，如.navbar.nav.nav-item.nav-link等。响应式设计：学习如何使用 Bootstrap 的响应式工具类来确保菜单栏和导航栏在不同屏幕尺寸下的良好显示效果。1、通过在代码编辑器中实际编写代码，尝试创建不同样式的菜单栏和导航栏，加深理解和熟练应用；
修改bootstrap导航栏样式(颜色，高)
qq_45532769的博客
02-28 4380
修改bootstrap导航栏样式(颜色，高)
Bootstrap 5-导航栏-可折叠导航栏
m0_73839298的博客
09-25 1424
可折叠导航栏代码图效果图。
bootstrap所使用的图标集
JackLiu16的博客
09-26 1599
http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm https://v3.bootcss.com/components/ https://blog.csdn.net/weixin_37189727/article/details/79483745
Bootstrap前端框架入门：导航栏与基础概念解析
Bootstrap4（在本摘要中提及的可能是Bootstrap3）对移动设备的支持尤为重视，其样式设计首先考虑移动端，然后扩展到桌面和其他大屏幕设备。 Bootstrap中的navbar组件是构建导航栏的关键元素，适用于创建网站或应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TomLazy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值