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)

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

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 无线电