代码头部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/>
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> -->
<script src="js/jquery.js" ></script>
<script src="js/bootstrap.js" ></script>
<style type="text/css">
hr {
border: 1px solid #00FFFF;
}
body {
margin: 40px;
}
</style>
</head>
<body>
<!-- 图标 -->
<!-- aria-label属性表示该标签的意图 -->
<!-- 如果图标纯粹当装饰作用时，可以给这些图标设置aria-hidden=“true”属性 -->
<button type="button" class="btn btn-success" aria-label="Left Alin">
<span class="glyphicon glyphicon-user"></span>
</button><br>
<hr >
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
<hr >
<!-- 下拉菜单 -->
<!-- 下拉菜单写法：
1、写一个dropdown容器，将按钮和下拉列表包含在内
2、button按钮设置data-toggle属性=“dropdown
3、将下拉列表的内容写在无序列表ul中，设置属性dropdown-menu”-->
<!-- 上拉列表，设置dropup属性 -->
<div class="dropup">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜单<i class="caret"></i>
</button>
<ul class="dropdown-menu">
<li>首页</li>
<li>教务处</li>
<li>招生办</li>
<li>宣传部</li>
<li>人事部</li>
<li>市场部</li>
</ul>
</div>
<!-- 给下拉列表添加标题 dropdown-header-->
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
下拉列表标题
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">标题</li> ·
<li>首页</li>
<li>注册</li>
</ul>
</div>
<!-- 给下拉列表添加分割线 -->
<div class="dropdown">
<button type="button" class="btn btn-default" data-toggle="dropdown">
下拉列表分割线
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">标题</li>
<li role="separator" class="divider"></li> <!--分割线-->
<li>首页</li>
<li>注册</li>
<li>登录</li>
</ul>
</div>
<hr > <!-- 禁用菜单项，就给li元素添加disabled -->
<!-- 按钮组 -->
<!-- 通过按钮组容器把一组按钮放在同一行里。 -->
<div class="btn-group" role="group">
<button class="btn btn-default" type="button">Left</button>
<button class="btn btn-default" type="button">Center</button>
<button type="button" class="btn btn-default">Right</button>
</div> <!-- 按钮工具栏 -->
<!-- 把btn-group再放进btn-toolbar里 -->
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default" type="button">1</button>
<button class="btn btn-default" type="button">2</button>
<button class="btn btn-default" type="button">3</button>
<button class="btn btn-default" type="button">4</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">5</button>
<button class="btn btn-default" type="button">6</button>
</div>
</div>
<hr > <!-- 嵌套 -->
<!-- 把下拉菜单混合到一系列按钮中，只需把btn-group放进另一个btn-group中 -->
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-success">1</button>
<div class="btn-group">
<button type="button" class="btn btn-default" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">标题</li>
<li class="divider"></li>
<li class="text-center">首页</li>
<li>登录</li>
<li>注册</li>
</ul>
</div>
</div>
<hr > <!-- 垂直排列 -->
<!-- 让一组按钮垂直排列显示 -->
<div class="btn-group-vertical">
<button type="button" class="btn btn-success">首页</button>
<button type="button" class="btn btn-success">流量管理</button>
<div class="btn-group">
<!-- <div class="dropdown"> -->
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-menu-right"></span>
实时监控
</button>
<ul class="dropdown-menu">
<li>在线用户</li>
<li>服务监控</li>
<li>黑名单</li>
</ul>
<!-- </div> -->
</div>
<button type="button" class="btn btn-default">内置报表</button>
</div>
<hr >
<div class="btn-group">
<!-- <div class="dropdown"> -->
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-menu-right"></span>
流量管理
</button>
<ul class="dropdown-menu">
<li>在线用户</li>
<li>服务监控</li>
<li>黑名单</li>
</ul>
<!-- </div> -->
</div>
<hr >
<!-- 两端对齐 -->
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default">左</a>
<a href="#" class="btn btn-default">中</a>
<a href="#" class="btn btn-default">右</a>
</div>
<hr >
<!-- 按钮式下拉菜单 -->
<!-- 把任意一个按钮放在btn-group中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器 -->
<!-- 单按钮式下拉菜单 -->
<div class="btn-group">
<button type="button" class="btn btn-default" data-toggle="dropdown">
Default
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>首页</li>
<li>登录</li>
<li>注册</li>
<li>退出</li>
</ul>
</div>
<hr >
<!-- 分裂式按钮 -->
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>首页</li>
<li>登录</li>
<li>注册</li>
<li>退出</li>
</ul>
</div>
<hr > <div class="btn-group btn-group-lg">
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>首页</li>
<li>登录</li>
<li>注册</li>
<li>退出</li>
</ul>
</div>
<hr >
<!-- 输入框组 -->
<!-- 为input-group添加input-group-addon或input-group-btn类，可以给form-control的前后添加额外的元素 -->
<div class="input-group">
<input type="text" class="form-control" name="" id="" value="" placeholder="请输入....." />
<div class="input-group-addon">
<span class="glyphicon glyphicon-alert"></span>
</div>
</div>
<div class="input-group">
<input type="text" class="form-control" name="" id="" value="" placeholder="aaaaaaa" />
<span class="input-group-addon">@qq.com</span>
</div>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" name="" id="" value="" />
</span>
<input type="text" class="form-control" name="" id="" value="" placeholder="多选框" />
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="" id="" value="" />
</span>
<input type="text" class="form-control" name="" id="" value="" placeholder="单选按钮" />
</div>
</div>
</div>
<!-- 作为额外元素的按钮 -->
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default">GO!</button>
</span>
<input type="text" class="form-control" name="" id="" value="" placeholder="请输入内容" />
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<input type="text" class="form-control" name="" id="" value="" placeholder="请输入搜索内容" />
<span class="input-group-btn">
<button type="button" class="btn btn-default">GO!</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
前置下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>首页</li>
<li>登录</li>
<li>注册</li>
</ul>
</div>
<input type="text" class="form-control" name="" id="" value="" placeholder="输入内容" />
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<input type="text" class="form-control" name="" id="" value="" placeholder="请输入内容" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">后置下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>首页</li>
<li>登录</li>
<li>注册</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default">前置分裂式下拉菜单</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>首页</li>
<li>登录</li>
<li>注册</li>
</ul>
</div>
<input type="text" class="form-control" name="" id="" value="" placeholder="前置分裂式下拉菜单" />
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<input type="text" class="form-control" name="" id="" value="" placeholder="后置分裂式下拉菜单" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>首页</li>
<li>登录</li>
<li>注册</li>
</ul>
<button type="button" class="btn btn-default">后置分裂式下拉菜单</button>
</div>
</div>
</div>
</div>
<hr >
</body>
</html>
769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
