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