编程 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 相关文章推荐

jQuery Tools tab(幻灯片)

Jul 14 Javascript

Jquery在指定DIV加载HTML示例代码

Feb 17 Javascript

jquery ui dialog替代confirm实例分析

Jan 25 Javascript

jQuery Position方法使用和兼容性

Aug 23 jQuery

微信小程序之发送短信倒计时功能

Aug 30 Javascript

浅谈Vue数据绑定的原理

Jan 08 Javascript

基于vue的验证码组件的示例代码

Jan 22 Javascript

详解vue项目中实现图片裁剪功能

Jun 07 Javascript

LayUI数据接口返回实体封装的例子

Sep 12 Javascript

JavaScript原型继承和原型链原理详解

Feb 04 Javascript

Node.js利用Express实现用户注册登陆功能(推荐)

Oct 26 Javascript

JS如何使用剪贴板操作Clipboard API

May 17 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动态实现表格跨行跨列实现代码

2012/11/06 PHP

PHP5.3以上版本安装ZendOptimizer扩展

2015/03/27 PHP

PHPStrom中实用的功能和快捷键大全

2015/09/23 PHP

yii2.0实现验证用户名与邮箱功能

2015/12/22 PHP

thinkphp jquery实现图片上传和预览效果

2020/07/22 PHP

php实现的统计字数函数定义与使用示例

2017/07/26 PHP

php PDO属性设置与操作方法分析

2018/12/27 PHP

基于jquery的滚动条滚动固定div(附演示下载)

2012/10/29 Javascript

JS操作Cookie写入和读取实例代码

2013/10/20 Javascript

使用jQuery实现验证上传图片的格式与大小

2014/12/03 Javascript

基于jquery的手风琴图片展示效果实现方法

2014/12/16 Javascript

JS访问SWF的函数用法实例

2015/07/01 Javascript

jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍

2016/06/24 Javascript

jQuery实现模拟flash头像裁切上传功能示例

2016/12/11 Javascript

JavaScript数据结构之数组的表示方法示例

2017/04/12 Javascript

微信小程序getPhoneNumber获取用户手机号

2017/09/29 Javascript

AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

2017/10/25 Javascript

Node.js使用Koa搭建基础项目

2018/01/08 Javascript

jQuery实现的监听导航滚动置顶状态功能示例

2018/07/23 jQuery

JavaScript中arguments和this对象用法分析

2018/08/08 Javascript

微信小程序 scroll-view 实现锚点跳转功能

2019/12/12 Javascript

JS面试题中深拷贝的实现讲解

2020/05/07 Javascript

使用python在校内发人人网状态(人人网看状态)

2014/02/19 Python

python进阶教程之词典、字典、dict

2014/08/29 Python

django初始化数据库的实例

2018/05/27 Python

5 个强大的HTML5 API 函数推荐

2014/11/19 HTML / CSS

Fabletics官网：美国运动服饰品牌，由好莱坞女演员凯特·哈德森创立

2019/10/19 全球购物

八年级英语教学反思

2014/01/09 职场文书

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

2014/10/26 职场文书

材料员岗位职责

2015/02/10 职场文书

2016暑期师德培训心得体会

2016/01/09 职场文书

Python基础之元编程知识总结

2021/05/23 Python

Springboot配置suffix指定mvc视图的后缀方法

2021/07/03 Java/Android

使用canvas对video视频某一刻截图功能

2021/09/25 HTML / CSS

Python中的pprint模块

2021/11/27 Python

Java设计模式之享元模式示例详解

2022/03/03 Java/Android