bootstrap-分裂式菜单（向上、向下），输入框组， form基本用法

来源：互联网发布：怎样在淘宝编辑：程序博客网时间：2024/05/21 08:03
<!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>
0 0