【Bootstrap框架】——组件（Component）

最新推荐文章于 2024-08-21 09:18:53 发布

ruirui_1996

最新推荐文章于 2024-08-21 09:18:53 发布

阅读量7.5k

点赞数 1

分类专栏：前端-Bootstrap

本文链接：https://blog.csdn.net/ruirui_1996/article/details/78067112

版权

这篇博客详细介绍了Bootstrap框架中的各种组件，包括标签页式导航、胶囊式导航、面包屑路径、分页、标签、徽章、巨幕、页头、水井等，并给出了相应的代码示例和效果图。此外，还讲解了响应式导航条的两种状态和分类，以及如何创建和使用这些组件。

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

1.图标字体

图标字体本身也是字体，与普通字体不同，内容是图标。
Bootstrap提供了一套专用于Web/移动开发图标字体，Glyphicons Halflings字体图标。

@font-face { /*声明一种服务器端字体*/
    font-family: 'Glyphicons Halflings';
    src: url(../fonts/glyphicons-halflings-regular.eot);
...}
.glyphicon { /*使用服务器端字体*/
    position: relative;
    font-family: 'Glyphicons Halflings';
... }

<span class="glyphicon glyphicon-alert"></span>
span中不能放其他元素及文字

这里写图片描述
代码：

<p>
    <span class="glyphicon glyphicon-alert"></span>您的浏览器不支持cookie
</p>
<button type="button" class="btn-success btn">
    <span class="glyphicon glyphicon-ok"></span>
</button>

常见图标：

首页：class=”glyphicon glyphicon-home”
用户：class=”glyphicon glyphicon-user”
配置：class=”glyphicon glyphicon-cog”
定位：class=”glyphicon glyphicon-map-marker”
点赞：class=”glyphicon glyphicon-thumbs-up”
鄙视：class=”glyphicon glyphicon-thumbs-down”
打分：class=”glyphicon glyphicon-star”
刷新：class=”glyphicon glyphicon-refresh”
前进：class=”glyphicon glyphicon-chevron-left”
后退：class=”glyphicon glyphicon-chevron-right”
箭头左：class=”glyphicon glyphicon-arrow-left”
箭头右：class=”glyphicon glyphicon-arrow-right”
对勾：class=”glyphicon glyphicon-ok”
叉号：class=”glyphicon glyphicon-remove”
播放：class=”glyphicon glyphicon-play”
暂停：class=”glyphicon glyphicon-pause”

这里写图片描述

2.按钮组

class=”btn-group”

<div class="btn-group">
    <button type="button" class="btn-info btn"><span class="glyphicon glyphicon-fast-backward"></span></button>
    <button type="button" class="btn-info btn"><span class="glyphicon glyphicon-backward"></span></button>
    <button type="button" class="btn-info btn"><span class="glyphicon glyphicon-play"></span></button>
    <button type="button" class="btn-info btn"><span class="glyphicon glyphicon-pause"></span></button>
    <button type="button" class="btn-info btn"><span class="glyphicon glyphicon-stop"></span></button>
    <button type="button" class="btn-info btn"><span class="glyphicon glyphicon-forward"></span></button>
    <button type="button" class="btn-info btn"><span class="glyphicon glyphicon-fast-forward"></span></button>
</div>