添加Bootstrap组件

字体图标

需要引入字体图标,首先引入文件

说明网址:http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

图标类不能直接与其他组件相结合,在同一个元素上也不能与其他类一起使用。需要嵌入<span>标签,并且<span>标签的类名必须是glyphicon

定义元素
引入图标资源
效果图

导航标签页

首先引入文件

说明网址:http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

导航组件可以对列表进行修饰,生成漂亮的导航元素。


给ul再添加nav-tabs


菜单项会以标签页的形式,显示出来

nav-pills类,效果是胶囊式


胶囊式

nav-stacked 垂直


垂直



下拉菜单

太复杂了,实在没搞懂

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 10,571评论 0 66
  • 第3章 探索Bootstrap组件 在这一章,我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按...
    海上名月阅读 4,551评论 1 6
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,188评论 19 139
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 13,745评论 3 184
  • Bootstrap 字体图标(Glyphicons) 字体图标是在 Web 项目中使用的图标字体。虽然,Glyph...
    亮亮叔家的小笔笔阅读 5,043评论 0 1

友情链接更多精彩内容