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 相关文章推荐
JS定时器实例
Apr 17 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
webpack的移动端适配方案小结
Jul 25 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
python 系统调用的实例详解
2017/07/11 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Python编写打字训练小程序
2019/09/26 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
Python连接字符串过程详解
2020/01/06 Python
亿企通软件测试面试题
2012/04/10 面试题
诚实守信道德模范事迹材料
2014/08/15 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
JavaScript ES6的函数拓展
2022/01/18 Javascript