Bootstrap基本样式学习笔记之表单(3)
作者：kikay 发布时间：2024-06-05 09:11:39
标签：Bootstrap,表单
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>
效果如下：
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>
效果如下：
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>
效果如下：
0
投稿猜你喜欢
- 本文实例讲述了php广告加载类的用法，非常实用。分享给大家供大家参考。具体方法如下：该php广告加载类，支持异步与同步加载。需要使用Jque
- Atlassian是一家软件开发商， 2002年创建于澳大利亚悉尼，在旧金山、阿姆斯特丹也有办公室，2011年收入为1亿美元，较2010年增
- django可以使用restframework快速开发接口，返回前端所需要的json数据，但是有时候利用restframework开发的接口
前言今天制作的这一款能在B站能指定直播间、自动发弹幕的功能的脚本，因为没做那么多的功能，所以代码很简单，适合刚入门的同学学习先打开一个直播间- 本文实例讲述了php字符串截取函数mb_substr用法。分享给大家供大家参考，具体如下：string mb_substr ( string
- Powerdesigner界面－tools-Resources－DBMS,点击左上角的New,选择copy from templete,如果
- 一：区别：1、var声明的变量属于函数作用域，而let和const声明的变量属于块级作用域；（js作用域在上篇文章） 2、var声
- 一、报错： 「Can't swap PDO instance while within transaction」通过查询 Larav
- 问题：1.一个销售系统,设有各级代理商,每个代理商的表是这样设计的 数据库结构表1: 代理商资料表[id]
- 作用域链首先来看看这段代码：var a = '喜羊羊';function A(){ console
- 今天有业务需要制作用户头像的需求，在网上找了个可以裁剪大图制作自己希望大小的图片的方法（基于Struts2）。特此记录一下。不废话，具体的步
- 看了好多登录注册和注销的教程，很乱，很迷，然后总结了一下，简单的做了一个登录，注册和注销的页面。1，首先，使用pycharm创建一个项目单击
- 实现神经网络的权重和偏置更新，很重要的一部就是使用BackPropagation（反向传播）算法。具体来说，反向传播算法就是用误差的反向传播
- vue单页开发时经常需要父子组件之间传值，自己用过但是不是很熟练，这里我抽空整理了一下思路，写写自己的总结。GitHub地址：https:/
- 本文实例讲述了彻底删除thinkphp3.1案例blog标签的方法。分享给大家供大家参考。具体方法如下：thinkphp3.1框架中的案例b
- 1. sys 模块Python 中的 sys 模块具有 argv 功能。当通过终端触发 main.py 的执行时，此功能将返回提供给 mai
- 原文地址第一次翻译文章，请各路人士多多指教！类型和接口因为映射建设在类型的基础之上，首先我们对类型进行全新的介绍。go是一个静态性语言，每个
- 1. 前言。1.1. 需求背景。 每天抓取的是同一份商品的数据，用来做趋势分析。要求每天都需要抓一份，也仅限抓取一份数据。但是整个
- 数据库技术是计算机科学中发展最快的领域之一，数据库的诞生和发展给计算机信息管理带来了一场巨大的革命。数据库的诞生和发展给计算机信息管理带来了
- 动机有时候需要在代码头部添加像这样的一段注释。这段注释包括了作者、代码版权许可等信息。每次重复添加都会让您觉得非常麻烦。作为开发者的您，时间
