【Bootstrap】可复用的组件

早睡早起长头发

已于 2023-01-05 08:54:28 修改

阅读量578

点赞数

分类专栏： Bootstrap 文章标签：前端 javascript html

于 2023-01-04 08:02:30 首次发布

本文链接：https://blog.csdn.net/weixin_51481135/article/details/128519973

版权

本文详细介绍了Bootstrap中的下拉菜单、按钮组和输入框组的使用，包括下拉菜单的步骤、对齐、分割线和禁用选项，按钮组的尺寸、嵌套和垂直排列，以及输入框组的组合方式和尺寸调整。通过这些组件，可以创建可复用且功能丰富的前端界面。

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

一、字体图标

组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

    <button class="btn btn-defalut">
        左对齐
        <span class="glyphicon glyphicon-align-left"></span>
        左对齐
    </button>
    <button class="btn btn-defalut">
        居中
        <span class="glyphicon glyphicon-align-center"></span>
        居中
    </button>
    <button class="btn btn-defalut">
        右对齐
        <span class="glyphicon glyphicon-align-right"></span>
        右对齐
    </button>
    <button class="btn btn-defalut">
        两端对齐
        <span class="glyphicon glyphicon-align-justify"></span>
        两端对齐
    </button>

二、下拉菜单

用于显示链接列表的可切换、有上下文的菜单。

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里。

通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）。

1. 步骤

定义容器(容器的class为：dropdown)
在容器中添加菜单触发器和菜单项

    <div class="dropdown">
        <!-- 定义容器(容器的class为：dropdown) -->
        <button class="btn btn-default" 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>
            <li><a href="#">组织结构</a></li>
        </ul>
    </div>

    <div class="dropup">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            Dropup
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#"