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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
iframe实用操作锦集
Apr 22 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 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中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
Nuxt.js实战和配置详解
2019/08/05 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
Python生成随机数的方法
2014/01/14 Python
讲解Python中的递归函数
2015/04/27 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
基于python实现学生信息管理系统
2019/11/22 Python
Python实现图片添加文字
2019/11/26 Python
验房委托书
2014/08/30 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
勇敢的心观后感
2015/06/09 职场文书
《给予树》教学反思
2016/03/03 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers