优秀的编程知识分享平台

网站首页 > 技术文章 正文

Bootstrap第十一天学习（bootstrap入门）

nanyue 2024-07-26 15:47:59 技术文章 4 ℃ 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>下拉菜单</title>
        <link rel="stylesheet" type="text/css" 
            href="bootstrap/css/bootstrap.min.css"/>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <!--
            下拉菜单
                1.类名：.dropdown或.btn-group的div包裹整个下拉框
                      <div class="dropdown"></div>
                2.默认向下dropdown，向上弹起加入.dropup即可
                3.使用button作为父菜单，使用类名：.dropdown-toggle和
                  自定义data-toggle属性
                  <button type="button" class="btn btn-default dropdown-toggle" 
                    data-toggle="dropdown"></button>
                4.在button中使用font制作下拉箭头
                  <span class="caret"></span>
                5.下拉菜单项使用一个ul列表，并且定义一个类名为"dropdown-menu"
                6.分组分割线：<li>添加类名"divider"来实现添加下拉分隔线的功能
                7.分组标题：<li>添加类名"dropdown-header"来实现分组功能
                8.对齐方式：
                      1)、dropdown-menu-left 左对齐 默认样式
                      2)、dropdown-menu-right 右对齐
                9.激活状态：.active和禁用状态.disabled

        -->

        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                电影类型
                <span class="caret"></span>

            </button>

            <ul class="dropdown-menu">
                <li class="dropdown-header">-- 动作 --</li>
                <li><a href="#">速度与激情9</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">-- 喜剧 --</li>
                <li><a href="#">这个杀手不太冷静</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">-- 科幻 --</li>
                <li><a href="#">月球陨落</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">-- 战争 --</li>
                <li><a href="#">长津湖之水门桥</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">-- 恐怖 --</li>
                <li><a href="#">生化危机</a></li>
            </ul>
        </div>

    </body>
</html>

Tags：

猜你喜欢

最近发表
标签列表