脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap表单

Bootstrap基本样式学习笔记之表单(3)

 更新时间：2016年12月07日 11:45:44   作者：kikay  
这篇文章主要介绍了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">密&nbsp;&nbsp;&nbsp;&nbsp;码</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="登&nbsp;&nbsp;&nbsp;&nbsp;录">
  </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">密&nbsp;&nbsp;&nbsp;&nbsp;码:</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="登&nbsp;&nbsp;&nbsp;&nbsp;录">
    </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">密&nbsp;&nbsp;&nbsp;&nbsp;码:</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="登&nbsp;&nbsp;&nbsp;&nbsp;录">
  </div>
 </form>
</div>
</body>
</html>

效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • switchery按钮的使用方法

    switchery按钮的使用方法

    下面小编就为大家分享一篇switchery按钮的使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • JavaScript实现涂鸦笔功能

    JavaScript实现涂鸦笔功能

    这篇文章主要为大家详细介绍了JavaScript实现涂鸦笔功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • js实现随机数字字母验证码

    js实现随机数字字母验证码

    这篇文章主要为大家详细介绍了js随机验证码的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS函数的定义与调用方法推荐

    JS函数的定义与调用方法推荐

    下面小编就为大家带来一篇JS函数的定义与调用方法推荐。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 解析JavaScript数组方法reduce

    解析JavaScript数组方法reduce

    本文主要介绍了JavaScript数组方法reduce的概述、语法、参数、工作原理等，由浅入深，便于理解。需要的朋友可以看下
    2016-12-12
  • 提升PHP安全：8个必须修改的PHP默认配置

    提升PHP安全：8个必须修改的PHP默认配置

    这篇文章主要介绍了提升PHP安全：8个必须修改的PHP默认配置,PHP.ini中的默认配置是面向开发者的,如果是生产环境是必须要修改一些配置的,需要的朋友可以参考下
    2014-11-11
  • 使用ECharts进行数据可视化的代码详解

    使用ECharts进行数据可视化的代码详解

    ECharts 是一个由百度开源的强大、灵活的 JavaScript 图表库,用于在 Web 页面上创建各种类型的数据可视化图表,它具有丰富的图表类型、强大的配置选项和良好的跨平台兼容性,本文介绍了如何使用ECharts进行数据可视化,需要的朋友可以参考下
    2024-08-08
  • 对TypeScript库进行单元测试的方法

    对TypeScript库进行单元测试的方法

    这篇文章主要介绍了对TypeScript库进行单元测试的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 关于JSON解析的实现过程解析

    关于JSON解析的实现过程解析

    这篇文章主要介绍了关于JSON解析的实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 理解JavaScript中的适配器模式Adapter Pattern

    理解JavaScript中的适配器模式Adapter Pattern

    这篇文章主要介绍了理解JavaScript中的适配器模式,适配器模式即Adapter Pattern，是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，下文更多相关介绍需要的小伙伴可以参考一下
    2022-04-04

最新评论