乐码库:一个极速、放心、纯净的下载站! 更新: 资源发布
  • 您的位置:首页 > 技术文档 > JavaScript > Bootstrap基本样式学习笔记之表单(3)
  • 收藏本页
      Bootstrap基本样式学习笔记之表单(3)
      发布时间:2016-12-21 08:10:42 关键词: Bootstrap表单样式,Bootstrap基本样式,Bootstrap表单
      内容简介:这篇文章主要介绍了Bootstrap学习笔记之表单基本样式的相关资料,为大家分享了三种表单样式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

    0x01 样式1

    一个登录界面:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="../../css/bootstrap.min.css" rel="stylesheet">
     <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
     <script src="../../js/bootstrap.min.js"></script>
     <title>用户登录</title>
    </head>
    <body>
    <div class="container">
     <form>
      <div class="form-group">
       <label for="UserName">用户名</label>
       <input type="text" class="form-control" id="UserName" placeholder="用户名">
      </div>
      <div class="form-group">
       <label for="PassWord">密    码</label>
       <input type="password" class="form-control" id="PassWord" placeholder="密码">
      </div>
      <div class="form-group">
       <label>
        <input type="checkbox">记住我吗?
       </label>
      </div>
      <div class="form-group">
       <input type="button" class="btn btn-default" id="Submit" value="登    录">
      </div>
     </form>
    </div>
    </body>
    </html>

    效果如下:

    0x02 样式2

    如果要将label与文本框在同一行显示,修改如下:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="../../css/bootstrap.min.css" rel="stylesheet">
     <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
     <script src="../../js/bootstrap.min.js"></script>
     <title>用户登录</title>
    </head>
    <body>
    <div class="container">
     <div class="col-lg-3 col-md-3 col-xs-3"></div>
     <div class="col-lg-6 col-md-6 col-xs-6">
      <div class="page-header">
       <h1>用户登录</h1>
      </div>
      <form class="form-horizontal">
       <div class="form-group">
        <div class="col-lg-2 col-sm-2 col-xs-2">
         <label for="UserName" class="control-label">用户名:</label>
        </div>
        <div class="col-lg-10 col-sm-10 col-xs-10">
         <input type="text" class="form-control" id="UserName" placeholder="用户名">
        </div>
       </div>
       <div class="form-group">
        <div class="col-lg-2 col-sm-2 col-xs-2">
         <label for="PassWord" class="control-label">密    码:</label>
        </div>
        <div class="col-lg-10 col-sm-10 col-xs-10">
         <input type="password" class="form-control" id="PassWord" placeholder="密码">
        </div>
       </div>
       <div class="form-group">
        <div class="col-lg-2 col-sm-2 col-xs-2"></div>
        <div class="col-lg-10 col-sm-10 col-xs-10">
         <div class="checkbox">
          <label>
           <input type="checkbox">记住我吗?
          </label>
         </div>
        </div>
       </div>
       <div class="form-group">
        <div class="col-lg-2 col-sm-2 col-xs-2"></div>
        <div class="col-lg-10 col-sm-10 col-xs-10">
         <input type="button" class="btn btn-default" id="Submit" value="登    录">
        </div>
       </div>
      </form>
     </div>
     <div class="col-lg-3 col-md-3 col-xs-3"></div>
    </div>
    </body>
    </html>

    效果如下:

    0x03 样式3

    如果将文本框放在同一行,修改如下:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="../../css/bootstrap.min.css" rel="stylesheet">
     <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
     <script src="../../js/bootstrap.min.js"></script>
     <title>用户登录</title>
    </head>
    <body>
    <div class="container">
     <form class="form-inline">
      <div class="form-group">
       <label class="control-label" for="UserName">用户名:</label>
       <input type="text" class="form-control" id="UserName" placeholder="用户名">
      </div>
      <div class="form-group">
       <label class="control-label" for="PassWord">密    码:</label>
       <input type="password" class="form-control" id="PassWord" placeholder="密码">
      </div>
      <div class="form-group">
       <div class="checkbox">
        <label>
         <input type="checkbox">记住我吗?
        </label>
       </div>
      </div>
      <div class="form-group">
       <input type="button" class="btn btn-default" id="Submit" value="登    录">
      </div>
     </form>
    </div>
    </body>
    </html>
    
    

    效果如下:

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持乐码库。

      最新更新
      热门排行榜