编程 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 学习之二属性文本与值(text,val)

Nov 25 Javascript

让table变成exls的示例代码

Mar 24 Javascript

树结构之JavaScript

Jan 24 Javascript

Node.js如何实现注册邮箱激活功能 (常见)

Jul 23 Javascript

浅谈FastClick 填坑及源码解析

Mar 02 Javascript

详解搭建es6+devServer简单开发环境

Sep 25 Javascript

jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法

Jan 18 jQuery

Vue批量图片显示时遇到的路径被解析问题

Mar 28 Javascript

微信小程序实现人脸识别登陆的示例代码

Apr 02 Javascript

浅析Vue 中的 render 函数

Feb 28 Javascript

Vue执行方法,方法获取data值,设置data值,方法传值操作

Aug 05 Javascript

vue data有值,但是页面{{}} 取不到值的解决

Nov 09 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 购物车的例子

2009/05/04 PHP

php侧拉菜单漂亮，可以向右或者向左展开，支持FF，IE

2009/10/15 PHP

PHP实现时间比较和时间差计算的方法示例

2017/07/24 PHP

PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】

2018/05/21 PHP

总结AJAX相关JS代码片段和浏览器模型

2007/08/15 Javascript

一个关于jqGrid使用的小例子(行按钮)

2011/11/04 Javascript

jquery聚焦文本框与扩展文本框聚焦方法

2012/10/12 Javascript

node.js中的path.normalize方法使用说明

2014/12/08 Javascript

jQuery使用$.ajax进行即时验证实例详解

2015/12/11 Javascript

JS自定义混合Mixin函数示例

2016/11/26 Javascript

Vue波纹按钮组件制作

2018/04/30 Javascript

取消Bootstrap的dropdown-menu点击默认关闭事件方法

2018/08/10 Javascript

jQuery+css last-child实现选择最后一个子元素操作示例

2018/12/10 jQuery

详解nuxt 微信公众号支付遇到的问题与解决

2019/08/26 Javascript

Vue extend的基本用法(实例详解)

2019/12/09 Javascript

vue print.js打印支持Echarts图表操作

2020/11/13 Javascript

[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11

2020/12/13 DOTA

python基于socket实现网络广播的方法

2015/04/29 Python

Python文件去除注释的方法

2015/05/25 Python

使用Python多线程爬虫爬取电影天堂资源

2016/09/23 Python

python网络爬虫之如何伪装逃过反爬虫程序的方法

2017/11/23 Python

python opencv之SIFT算法示例

2018/02/24 Python

python爬虫之xpath的基本使用详解

2018/04/18 Python

python 读取修改pcap包的例子

2019/07/23 Python

在django中图片上传的格式校验及大小方法

2019/07/28 Python

解决pyqt5异常退出无提示信息的问题

2020/04/08 Python

详解python3 GUI刷屏器(附源码)

2021/02/18 Python

HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)

2017/08/24 HTML / CSS

荷兰领先的百货商店：De Bijenkorf

2018/10/17 全球购物

ANINE BING官方网站：奢华的衣橱基本款和时尚永恒的单品

2019/11/26 全球购物

生产车间实习自我鉴定

2013/09/23 职场文书

职业生涯规划书基本格式

2014/01/06 职场文书

优秀教研组申报材料

2014/12/26 职场文书

学前教育见习总结

2015/06/23 职场文书

社区低保工作总结2015

2015/07/23 职场文书

nginx.conf配置文件结构小结

2022/04/08 Servers