前端基础之《Bootstrap（5）—CSS组件_字体图标、按钮组和下拉菜单》

csj50

已于 2022-11-03 13:30:21 修改

阅读量881

点赞数

分类专栏：前端基础文章标签：前端 bootstrap

于 2022-11-03 10:48:53 首次发布

本文链接：https://blog.csdn.net/csj50/article/details/127665906

版权

前端基础专栏收录该内容

55 篇文章 0 订阅

订阅专栏

一、字体图标

1、bootstrap提供的文字图片
https://v3.bootcss.com/components/#glyphicons

<body>
	<div class="container">
        <h1 class="page-header">bootstrap前端框架</h1>
        <h2><span class="glyphicon glyphicon-user"></span> 用户名：小金</h2>
    </div>
</body>

二、下拉菜单

1、下拉菜单（.dropdown）
选项（.dropdown-menu）

<div class="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown">更多课程<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a>百度</a></li>
        <li><a>百度</a></li>
        <li><a>百度</a></li>
        <li><a>百度</a></li>
        <li><a>百度</a></li>
    </ul>
</div>

三、按钮组

1、把多个按钮连在一起（.btn-group）

<div class="btn-group">
    <button class="btn btn-info">百度</button>
    <button class="btn btn-info">百度</button>
    <button class="btn btn-info">百度</button>
    <button class="btn btn-info">百度</button>
</div>

2、按钮工具条（.btn-toolbar）
把多个按钮组组合在一起。

<div class="btn-toolbar">
    <div class="btn-group">
        <button class="btn btn-info">百度</button>
        <button class="btn btn-info">百度</button>
        <button class="btn btn-info">百度</button>
        <button class="btn btn-info">百度</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-info">百度</button>
        <button class="btn btn-info">百度</button>
        <button class="btn btn-info">百度</button>
        <button class="btn btn-info">百度</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-info">百度</button>
    </div>
</div>

3、按钮组尺寸
巨大的（.btn-group-lg）
小的（.btn-group-sm）
微小的（.btn-group-xs）

4、按钮组垂直排列（.btn-group-vertical）

5、按钮组嵌套（.dropdown-toggle）

6、两端对齐的按钮组（.btn-group-justified）

<div class="btn-group-justified">
    <div class="btn-group">
        <button class="btn btn-info">百度</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-info">百度</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-info">百度</button>
    </div>
</div>

7、按钮组带下拉菜单

<div class="btn-group">
    <button class="btn btn-default">Default</button>
    <button class="btn btn-danger dropdown-toggle" 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>
    </ul>
</div>

csj50

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础之《Bootstrap（5）—CSS组件_字体图标、按钮组和下拉菜单》

6、两端对齐的按钮组（.btn-group-justified）4、按钮组垂直排列（.btn-group-vertical）5、按钮组嵌套（.dropdown-toggle）1、把多个按钮连在一起（.btn-group）2、按钮工具条（.btn-toolbar）1、bootstrap提供的文字图片。选项（.dropdown-menu）巨大的（.btn-group-lg）微小的（.btn-group-xs）1、下拉菜单（.dropdown）小的（.btn-group-sm）7、按钮组带下拉菜单。
复制链接

扫一扫