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 相关文章推荐
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 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
php验证session无效的解决方法
2014/11/04 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
python画图常规设置方式
2020/03/05 Python
浅析Python迭代器的高级用法
2020/07/16 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
会计自荐信范文
2014/03/09 职场文书
网络营销策划方案
2014/06/04 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
小学班主任研修日志
2015/11/13 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android
SQL Server删除表中的重复数据
2022/05/25 SQL Server
nginx之queue的具体使用
2022/06/28 Servers