bootstrap-分裂式菜单（向上、向下），输入框组， form基本用法
<!--为了确保适当的绘制和触屏缩放，需要在之中添加 viewport 元数据标签。-->--><!--[if lt IE 9]--><!--分裂式按钮下拉菜单用法：先准备容器尺寸：跟btn按钮的尺
·
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--媒体查询-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--禁止缩放-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--如果ie的版本小于9,让ie8识别html5,同时识别媒体查询语句-->
<!--[if lt IE 9]
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
-->
</head>
<body>
<!--分裂式按钮下拉菜单
用法：先准备容器
尺寸：跟btn按钮的尺寸一样
-->
<!-- Split button -->
<div class="btn-group">
<!--按钮的文字-->
<button type="button" class="btn btn-default">请选择</button>
<!--dropdown-toggle：下拉风格 -->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<!--需要指定： class="dropdown-menu" role="menu"-->
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><br/><br/><br/><br/><br/>
<!--
向上弹出式菜单:给父元素(容器)添加 .dropup 类就能使触发的下拉菜单朝上方打开。
dropup
-->
<div class="btn-group dropup" style="margin-left: 300px;">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!--
输入框组：
通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。
input-group：输入框组，把多个输入框排在一起
input-group，一般不用于select textarea
input-group-xxx:指定尺寸，可以控制输入框的高度
-->
<!--class="input-groupa-addon" ：为inpout 左边或右边添加图片-->
<p class="input-group-lg" >
<input type="text" class="form-control" />
</p>
<!--左边-->
<div class="input-group">
<span class="input-groupa-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<!--右边-->
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<!--两边-->
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<!--
表单：
用法：
form-gruop form-control
-->
<form action="#">
<div class="form-group">
<label for="username">用户名</label>
<input name="username" type="text" class="form-control"/><br/>
</div>
<div class="form-group">
<label for="usepwd">密码</label>
<input name="usepwd" type="password" class="form-control"><br/>
</div>
<div class="btn-group">
<input type="submit" class="btn-danger btn"/>
<input type="submit" value="reset" class="btn-danger btn"/>
</div>
</form>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- 加载Bootstrap核心库 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)