bootstrap-基础表单

1.运行效果如图所示

2.实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>表单</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
    crossorigin="anonymous">
</head>
<body>
    <form action="">
        <div class="form-group">
            <label for="exampleInputEmail1">邮箱:</label>
            <input type="email" 
            class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码:</label>
            <input type="password" 
            class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
        </div>
        <div class="checkbox">
            <label for="">
                <input type="checkbox">记住密码
            </label>
        </div>
        <button type="submit" class="btn btn-default">登录</button>
    </form>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
</body>
</html>
时间: 2024-10-09 17:58:38

bootstrap-基础表单的相关文章

bootstrap 基础表单 内联表单 横向表单

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"> </head> <body> <p c

Bootstrap系列 -- 11. 基础表单

表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">邮箱

Bootstrap关于表单(一)

1.基础表单 表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

Bootstrap之表单

基础表单 表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 当然表单除了这几个元素之外,还有input.select.textarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变

Flask:03-你离最美的web只差一个:bootstrap与表单

bootstrap与表单 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端开发框架,使得 Web 开发更加快捷. Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的BreakingNews都使用了该项目.国内一些移动

HTML基础表单

HTML基础表单 1.表单标签 标签 描述 form:定义供用户输入的表单 input:定义输入域 textarea :定义文本域 (一个多行的输入控件) label :定义一个控制的标签 fieldset :定义域 legend :定义域的标题 select:定义一个选择列表 option :定义下拉列表中的选项 button :定义一个按钮 hoden:隐藏 submit:自带提交按钮 reset:重置 date:日期 radio:单选 checkbox:复选 number:数字 email

Bootstrap之表单控件状态

Bootstrap中的表单控件状态主要有三种:焦点状态,禁用状态,验证状态. 一.焦点状态:该状态告诉用户可输入或选择东西 焦点状态通过伪类“:focus”以实现. bootstrap.css相应源码: .form-control:focus { border-color: #66afe9; outline: 0; //删除了outline的默认样式 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 1

BootStrap 智能表单

背景:本码农.NET后端工程师,由于现在的公司后端能玩到的东西不怎么深入(一般也就sql.linq.反射.wcf....),所以申请玩玩前端的东西,在负责的一个电商项目中发现很大一部分是根据表结构来构建form表单的,而且模块还很多的,特别是表的列名都还没确定的时候需要先出界面,等后面表列名确定后又的重新来给表单元素加上id.name等,尼玛感觉这样下去就是一真正的码农了,于是自己整了一套根据配置来生成form表单的插件 源码地址(github):BootStrap智能表单 本系列将包括 1.表

BootStrap 智能表单系列 十 自动完成组件的支持

web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需要将产品的编号.产品的名称.产品的单价.产品的备注信息等填写会表单中的某个位置 代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-autocomplete.html): 自动完成

BootStrap 智能表单系列 十一 级联下拉的支持

像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然后通过关联来显示或隐藏与上一级别无关的项 感觉还是第二种简单一些,于是使用了第二种方式来实现的,其余的就不废话了 代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-cascade