<!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>

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐