编程 Javascript

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

Posted in Javascript onDecember 07, 2016

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>

效果如下：

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

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>

效果如下：

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

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>

效果如下：

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

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

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

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Array.prototype.concat不是通用方法反驳[译]

Sep 20 Javascript

js 连接数据库如何操作数据库中的数据

Nov 23 Javascript

JS等比例缩小图片尺寸的实例

Feb 27 Javascript

js浮点数保留两位小数点示例代码(四舍五入)

Dec 26 Javascript

JavaScript中Window对象的属性及事件

Dec 25 Javascript

JavaScript 中有关数组对象的方法(详解)

Aug 15 Javascript

angularjs实现文字上下无缝滚动特效代码

Sep 04 Javascript

在vue中安装使用vux的教程详解

Sep 16 Javascript

vue实现的微信机器人聊天功能案例【附源码下载】

Feb 18 Javascript

浅谈vue项目用到的mock数据接口的两种方式

Oct 09 Javascript

Vuejs中的watch实例详解(监听者)

Jan 05 Javascript

详解为element-ui的Select和Cascader添加弹层底部操作按钮

Feb 07 Javascript

jQuery删除当前节点元素

Dec 07 #Javascript

概述如何实现一个简单的浏览器端js模块加载器

Dec 07 #Javascript

jquery 标签隔若干行加空白或者加虚线的方法

Dec 07 #Javascript

浅析js的模块化编写 require.js

Dec 07 #Javascript

JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法

Dec 07 #Javascript

纯JS焦点图特效实例(可一个页面多用)

Dec 07 #Javascript

探究JavaScript中的五种事件处理程序方式

Dec 07 #Javascript

You might like

第二节对象模型 [2]

2006/10/09 PHP

PHP获得用户使用的代理服务器ip即真实ip

2006/12/31 PHP

PHP中的类型提示(type hinting)功能介绍

2015/07/01 PHP

详解Yii2 之生成 URL 的方法

2017/06/16 PHP

Laravel学习教程之request validation的编写

2017/10/25 PHP

Javascript-Mozilla和IE中的一个函数直接量的问题分析

2007/08/12 Javascript

javascript 模拟JQuery的Ready方法实现并出现的问题

2009/12/06 Javascript

ajax与302响应代码测试

2013/10/23 Javascript

JavaScript中document.forms[0]与getElementByName区别

2015/01/21 Javascript

JavaScript Function函数类型介绍

2015/04/08 Javascript

小白谈谈对JS原型链的理解

2016/05/03 Javascript

JavaScript编写页面半透明遮罩效果的简单示例

2016/05/09 Javascript

react.js 翻页插件实例代码

2017/01/19 Javascript

基于Vue-cli快速搭建项目的完整步骤

2018/11/03 Javascript

vue 验证两次输入的密码是否一致的方法示例

2020/09/29 Javascript

python重试装饰器示例

2014/02/11 Python

Python环境下搭建属于自己的pip源的教程

2016/05/05 Python

Python入门_学会创建并调用函数的方法

2017/05/16 Python

Python爬虫中urllib库的进阶学习

2018/01/05 Python

Python实现注册、登录小程序功能

2018/09/21 Python

python RabbitMQ 使用详细介绍(小结)

2018/11/08 Python

python opencv读mp4视频的实例

2018/12/07 Python

python如何给字典的键对应的值为字典项的字典赋值

2019/07/05 Python

python 3.6.7实现端口扫描器

2019/09/04 Python

在OpenCV里使用Camshift算法的实现

2019/11/22 Python

Python 日期的转换及计算的具体使用详解

2020/01/16 Python

在tensorflow中实现屏蔽输出的log信息

2020/02/04 Python

基于python3的socket聊天编程

2020/02/17 Python

Python代码中如何读取键盘录入的值

2020/05/27 Python

在线购买澳大利亚设计师手拿包和奢华晚装手袋：Olga Berg

2019/03/20 全球购物

单位单身证明范本

2014/01/11 职场文书

机关干部四风问题自查报告及整改措施

2014/10/26 职场文书

放牛班的春天观后感

2015/06/01 职场文书

新年寄语2016

2015/08/17 职场文书

聊聊JS ES6中的解构

2021/04/29 Javascript

无线电知识基础入门篇

2022/02/18 无线电