精华内容
下载资源
问答
  • Bootstrap 表单

    2021-01-19 21:25:37
    Bootstrap 表单 在本章中,我们将学习如何使用 Bootstrap 创建表单Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) ...
  • Bootstrap表单

    2019-10-01 18:44:42
    Bootstrap表单 在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认...

    Bootstrap 表单

    在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

    表单布局

    Bootstrap 提供了下列类型的表单布局:

    • 垂直表单(默认)
    • 内联表单
    • 水平表单

    垂直或基本表单

    基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:

    • 向父 <form> 元素添加 role="form"
    • 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
    • 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control

    内联表单

    如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline

    • 默认情况下,Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时,您需要在表单控件上设置一个宽度。
    • 使用 class .sr-only,您可以隐藏内联表单的标签。

    水平表单

    水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:

    • 向父 <form> 元素添加 class .form-horizontal
    • 把标签和控件放在一个带有 class .form-group 的 <div> 中。
    • 向标签添加 class .control-label

    支持的表单控件

    Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select

    输入框(Input)

    最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的,这样才能让 input 获得完整的样式。

    文本框(Textarea)

    当您需要进行多行输入的时,则可以使用文本框 textarea。必要时可以改变 rows 属性(较少的行 = 较小的盒子,较多的行 = 较大的盒子)。

    复选框(Checkbox)和单选框(Radio)

    复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。

    • 当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用 checkbox。如果您限制用户只能选择一个选项,请使用 radio

    对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。

    选择框(Select)

    当您想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项时,则使用选择框。

    • 使用 <select> 展示列表选项,通常是那些用户很熟悉的选择列表,比如州或者数字。
    • 使用 multiple="multiple" 允许用户选择多个选项。

    静态控件

    当您需要在一个水平表单内的表单标签后放置纯文本时,请在 <p> 上使用 class .form-control-static

    表单控件状态

    除了 :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上),Bootstrap 还为禁用的输入框定义了样式,并提供了表单验证的 class。

    输入框焦点

    当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow

    禁用的输入框 input

    如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

    禁用的字段集 fieldset

    对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。

    验证状态

    Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class(.has-warning、 .has-error 或 .has-success)即可使用验证状态。

    表单控件大小

    分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。

    表单帮助文本

    Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块,请在 <input> 后使用 .help-block

     

    转载于:https://www.cnblogs.com/Akeke/p/6658591.html

    展开全文
  • BootStrap表单

    2018-11-11 14:20:13
    BootStrap表单BootStrap介绍预处理脚本一个框架、多种设备特性齐全BootStrap 使用引入相关的 js、css兼容IE浏览器BootStrap代码解读JS事件 BootStrap介绍 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发...

    BootStrap介绍

      Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、
      所有应用场景而设计。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
    

    介绍内容摘自官网1

    预处理脚本

    虽然可以直接使用 Bootstrap 提供的 CSS 样式表,不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 
    和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发,也可以从源码定制自己需要的样式。
    

    一个框架、多种设备

       你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备,这一切都是 
       CSS 媒体查询(Media Query)的功劳。
    

    特性齐全

    Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。
    

    BootStrap 使用

    引入相关的 js、css

    <link rel="stylesheet" href="style/css/bootstrap.min.css">  
    <script type="text/javascript" src="style/js/jquery.min.js"></script>
    <script type="text/javascript" src="style/js/bootstrap.min.js"></script>
    

    兼容IE浏览器

    BootStrap兼容IE2, 引入如下文件

    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    

    BootStrap

    写了个模态框注册、登录, html代码如下
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <title>用户登录</title>
    <link rel="stylesheet" href="style/css/bootstrap.min.css">  
    <script type="text/javascript" src="style/js/jquery.min.js"></script>
    <script type="text/javascript" src="style/js/bootstrap.min.js"></script>
    <style type="text/css">
    	#horizontal {
    		margin-top : 10%;
    		margin-bottom : 20%;
    		width : 30%;
    		padding : 20px;
    	}
    	.spanblue {
    		color: blue;
    	}
    </style>
    <script type="text/javascript">
    	function openMotai(id){
    		$("#"+id).modal('show');
    	}
    	
    	function rsubmit(){
    		alert("1111");
    		return ;
    	}
    	
    	function ulogin(){
    		$("#loginInfo").html(
    		"<b style='color:red;font-size:15px;'>用户名不能为空!</b>");
    		//手动关闭模态窗口
    		//$("#loginModal").modal('hide');
    		return ;
    	}
    	
    	function pwdValidate(){
    		var password = $("#password").val();
    		var rpassword = $("#rpassword").val();
    		if(password != rpassword){
    			$("#spanrpassword").html("<b style='color:red;margin-top:auto;'>两次输入密码不相同!</b>");
    			$("#spanrpassword").attr('hidden',false);
    			document.getElementById("usubmit").disabled=true; 
    		}else{
    			$("#spanrpassword").attr('hidden',true);
    			document.getElementById("usubmit").disabled=false; 
    		}
    	}
    </script>
    </head>
    <body>
    <div class="container" id="horizontal">
    	<div class="row">
    		<div class="col-xs-6 col-sm-6">
    			<a data-toggle="modal" data-target="#registerModal" href="" style="font-size:30px;"><span class="glyphicon glyphicon-user spanblue"></span>注册</a>
    		</div>
    		<div class="col-xs-6 col-sm-6">
    			<a data-toggle="modal" data-target="#loginModal" href="" style="font-size:30px;"><span class="glyphicon glyphicon-log-in spanblue"></span>登录</a>
    		</div>
    	</div>
    </div>
    <!-- 注册窗口 -->
    <div id="registerModal" class="modal fade" role="dialog">
    		<div class="modal-dialog">
    			<div class="modal-content">
    				<div class="modal-header">
    					<button type="button" class="close" data-dismiss="modal">&times;</button>
    					<h1 class="text-center text-primary">欢迎注册</h1>
    				</div>
    				<div class="modal-title">
    					<!--<h1 class="text-center">注册</h1>-->
    				</div>
    				<div class="modal-body">
    					<form class="form col-md-12 center-block" action="/register" id="registerForm" method="post">
    							<div class="form-group">
    								<label for="firstName" >用户名</label>
    								<input class="form-control" name="username" type="text" id="username" maxlength="10" placeholder="请输入用户名"  autofocus />
    								<label id="spanUsername" hidden="true"></label>
    							</div>
    							<div class="form-group">
    								<label for="password" >密码</label>
    								<input class="form-control" name="password" type="password" id="password" maxlength="20" placeholder="请输入密码" />
    								<label id="spanPassword" hidden="true"></label>
    							</div>
    							<div class="form-group">
    								<label for="rpassword">再次输入密码</label>
    								<input class="form-control" name="rpassword" type="password" id="rpassword" maxlength="20" 
    									placeholder="请再次输入密码" onblur="pwdValidate()" />
    								<label id="spanrpassword" hidden="true"></label>
    							</div>
    							<div class="form-group">
    								<label for="email" >Email</label>
    								<input class="form-control" name="email" type="email" id="email" maxlength="20" placeholder="Email" />
    								<label id="spanEmail" hidden="true"></label>
    							</div>
    							<div class="form-group">
    								<label for="birthDate" >出生年月</label>
    								<input class="form-control" name="birth" type="date" id="birthDate" />
    								<label id="spanBirth" hidden="true"></label>
    							</div>
    							<div class="form-group">
    								<label for="">性别</label>
    								<div class="row">
    									<div class="col-sm-2">
    										<label class="radio-inline"> 
    											<input name="gender" class="gender" type="radio" id="maleRadio" value="男" checked=true />男
    										</label>
    									</div>
    									<div class="col-sm-2">
    										<label class="radio-inline"> 
    											<input name="gender" class="gender" type="radio" id="femaleRadio" value="女" />女
    										</label>
    									</div>
    								</div>
    							</div>
    							<div class="text-right">
    								<button class="btn btn-primary" type="button" id="usubmit" onclick="rsubmit()">提交</button>
    								<button class="btn btn-danger" data-dismiss="modal">取消</button>
    							</div>
    							<a href="" data-toggle="modal" data-dismiss="modal" data-target="#loginModal">已有账号?点我登录</a>
    					</form>
    					<span></span>
    				</div>
    				<div class="modal-footer"></div>
    			</div>
    		</div>
    </div>
    
    
    <!-- 登录窗口 -->
    <div id="loginModal" class="modal fade" role="dialog">
    		<div class="modal-dialog">
    			<div class="modal-content">
    				<div class="modal-header">
    					<button type="button" class="close" data-dismiss="modal">&times;</button>
    					<h1 class="text-center text-primary">欢迎登录</h1>
    				</div>
    				<div class="modal-title">
    					<!--<h1 class="text-center">欢迎登录</h1>-->
    				</div>
    				<div class="modal-body">
    					<form id="loginForm" action="user/login" method="post" class="form col-md-12 center-block">
    						<div class="form-group">
    							<input id="lusername" name="username" type="text"
    								class="form-control input-lg" placeholder="用户名">
    						</div>
    						<div class="form-group">
    							<input id="lpassword" name="password" type="password"
    								class="form-control input-lg" placeholder="登录密码">
    						</div>
    						<div class="form-group">
    							<div id="loginInfo"></div>
    						</div>
    						<div class="text-right">
    							<button id="submit1" class="btn btn-primary" type="button" onclick="ulogin()">立刻登录</button>
    							<button class="btn btn-danger" data-dismiss="modal">取消</button>
    						</div>
    						<a href="" data-toggle="modal" data-dismiss="modal" data-target="#registerModal">还没有账号?点我注册</a>
    					</form>
    					<span></span>
    				</div>
    				<div class="modal-footer text-right"></div>
    			</div>
    		</div>
    </div>
    </body>
    </html>
    

    代码解读

    JS事件

     刚开始两次密码一样时候使用的onkeyup事件,后来发现这个不好,换成了onblur事件
    

    js事件3

    参考网址
    [1]: https://v3.bootcss.com/
    [2]: http://bijian1013.iteye.com/blog/1978191
    [3]:https://blog.csdn.net/crystal6918/article/details/52934837


    1. BootStrap官网 ↩︎

    2. IE浏览器渲染规则 ↩︎

    3. js学习笔记:事件——事件类型 ↩︎

    展开全文
  • bootstrap表单

    2019-01-15 14:24:50
    1.bootstrap表单 (1)form 声明一个表单域(2)form-inline 内联表单域(3)form-horizontal 水平排列表单域(4)form-group 表单组、包括表单文字和表单控件(5)form-control 文本输入框、下拉列表控件样式(6)...

    1.bootstrap表单

    (1)form 声明一个表单域
    (2)form-inline 内联表单域
    (3)form-horizontal 水平排列表单域
    (4)form-group 表单组、包括表单文字和表单控件
    (5)form-control 文本输入框、下拉列表控件样式
    (6)checkbox check-inline 多选框样式
    (7)radio radio-inline 单选框样式
    (8)input-group 表单控件组
    (9)input-group-addon 表单控件组物件样式
    (10)input-group-btn 表单控件组物件为按钮的样式
    (11)form-group-lg 大尺寸表单
    (12)form-group-sm 小尺寸表单

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>表单</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">

    </script>

    <style type="text/css">

    .glyphicon .glyphicon-heart{
        color: antiquewhite;
    }
    </style>

    </head>
    <!--使用bootstrap的类和样式,所以上官网熟悉各种操作-->
    <body>
    <div class="container">
    <div class="row">
    <h2>表单</h2>
    </div>
    </div>
    <div class="container">
    <div class="row">
    <form>
    <div class="form-group">
    <label for="iptem">邮箱地址</label>
    <input type="email" name="邮箱地址" id="iptem" class="form-control" placeholder="email">
    </div>
    <div class="form-group">
    <label for="iptps">密码</label>
    <input type="password" name="password" id="iptps" class="form-control" placeholder="password">
    </div>
    </form>

            <br>
            <br>
    
            <form class="form-inline">
                <div class="form-group form-group-lg">
                    <label for="iptem01">邮箱地址</label>
                    <input type="email" name="邮箱地址" id="iptem01" class="form-control" placeholder="email">
                </div>
                <div class="form-group">
                    <label for="iptps01">密码</label>
                    <input type="password" name="password" id="iptps01" class="form-control" placeholder="password">
                </div>
            </form>
    
            <br>
            <br>
    
            <form class="form-horizontal">
                <div class="form-group form-group-lg">
                    <label for="iptem01" class="col-xs-2">邮箱地址</label>
                    <div class="col-xs-10">
    
                        <input type="email" name="邮箱地址" id="iptem01" class="form-control" placeholder="email">
                    </div>
    
                </div>
    
                <div class="form-group">
                    <label for="iptem01" class="col-xs-2">通信地址</label>
                    <div class="col-xs-10">
    
                        <input type="email" name="邮箱地址" id="iptem01" class="form-control" placeholder="email">
                    </div>
    
                </div>
    
                <div class="form-group">
                    <label for="iptps01" class="col-xs-2">密码</label>
                    <div class="col-xs-10">
                        <input type="password" name="password" id="iptps01" class="form-control" placeholder="password">
                    </div>  
                </div>
            </form>
    
            <form>
    
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-primary">
                            <span class="glyphicon glyphicon-heart" aria-hidden="true""></span>
                        </button>
                    </span>
    
                </div>
            </form>
    
        </div>
    </div>

    </body>
    </html>

    bootstrap表单

    2.bootstrap容器

    container-fluid流体
    container
    。1170
    。970
    。750
    。100%

    3.bootstrap响应式查询区间:
    (1)>=768
    (2)>=992
    (3)>=1200

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>container</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript">

    </script>

    <style type="text/css">
    /流体容器/
    .container-fluid,.container{
    height: 50px;
    background-color: antiquewhite;
    border: 1px solid #000;
    }
    </style>
    </head>

    <body>

    <div class="container-fluid">流体容器</div>
    <br>
    <br>
    <div class="container">响应式容器</div>

    </body>

    </html>

    bootstrap表单

    4.bootstrap栅格系统

    bootstrap将页面横向分为12等分,按照12等分定义了适应不同宽度等分的样式类,这些样式类组成了一套响应式、移动设备优先的流式栅格系统:

    (1)col-lg-大于1200排成一行,小于1200分别占一行
    (2)col-md-大于992排成一行,小于992分别占一行
    (3)col-sm-大于768排成一行,小于768分别占一行
    (4)col-xs-始终排列成一行

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>container</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript">

    </script>

    <style type="text/css">
    /样式选择器,选择含有col-/
    div[class*='col-']{
    border: 1px solid #000;
    background-color: antiquewhite;
    }
    </style>
    </head>

    <body>
    <!--container表示一行-->
    <div class="container">
    <h1>栅格系统:col-lg-,大于1200一行</h1>
    </div>

    <div class="container">
    
        <div class="col-lg-3">col-lg-3</div>
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-3">col-lg-3</div>
        <div class="col-lg-2">col-lg-2</div>
    </div>
    <br>
    <br>
    <br>
    <div class="container">
        <h1>栅格系统:col-md-,大于992一行</h1>
    </div>
    <div class="container">
    
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-2">col-md-2</div>
    </div>
    <br>
    <br>
    <br>
    <div class="container">
        <h1>栅格系统:col-sm-,大于768一行</h1>
    </div>
    <div class="container">
    
        <div class="col-sm-3">col-sm-3</div>
        <div class="col-sm-4">col-sm-4</div>
        <div class="col-sm-3">col-sm-3</div>
        <div class="col-sm-2">col-sm-2</div>
    </div>
    <br>
    <br>
    <br>
    <div class="container">
        <h1>栅格系统:col-xs-,始终一行</h1>
    </div>
    <div class="container">
    
        <div class="col-xs-3">col-xs-3</div>
        <div class="col-xs-4">col-xs-4</div>
        <div class="col-xs-3">col-xs-3</div>
        <div class="col-xs-2">col-xs-2</div>
    </div>

    </body>
    </html>

    bootstrap表单

    5.栅格系统:响应式原理

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>栅格</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript">

    </script>

    <style type="text/css">
    /样式选择器,选择含有col-/
    /div[class='col-']{
    border: 1px solid #000;
    background-color: antiquewhite;
    }/
    .box{
    height: 200px;
    max-width: 240px; /
    设置最大宽度,浏览器的变化有一个限定*/
    border: 1px solid #000;
    background-color: aqua;
    margin: 20px auto;
    }
    </style>
    </head>

    <body>

    <!--container表示一行-->
    <div class="container">
        <h1>栅格系统:响应式</h1>
    </div>
    
    <div class="container">

    <!--每行小于992显示两个,大于1200显示4个-->
    <div class="col-lg-3 col-md-6"><div class="box"></div></div>
    <div class="col-lg-3 col-md-6"><div class="box"></div></div>
    <div class="col-lg-3 col-md-6"><div class="box"></div></div>
    <div class="col-lg-3 col-md-6"><div class="box"></div></div>
    </div>

    </body>

    </html>

    bootstrap表单

    6.列偏移

    (1)col-lg-offset-
    (2)col-md-offset-
    (3)col-sm-offset-
    (4)col-xs-offset-

    7.栅格偏移

    (1)hidden-xs
    (2)hidden-sm
    (3)hidden-md
    (4)hidden-lg

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>栅格偏移</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript">

    </script>

    <style type="text/css">
    /样式选择器,选择含有col-/
    div[class*='col-']{
    border: 1px solid #000;
    background-color: antiquewhite;
    height: 50px;
    }
    </style>
    </head>

    <body>

    <!--container表示一行-->
    <div class="container">
        <div class="row">
    
            <h1>栅格系统:col-lg-,大于1200一行</h1>
        </div>
    
    </div>
    
    <div class="container">
        <div class="row">
    
            <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">col-lg-5</div>
            <div class="col-lg-5 col-md-5">col-lg-5</div>
        </div>
        <div class="row">
    
            <div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1">col-lg-4</div>
            <div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">col-lg-4</div>
        </div>
    </div>
    <br>
    <br>
    <br>
    <div class="container">
        <div class="row">
    
            <h1>栅格系统:隐藏</h1>
        </div>
    
    </div>
    
    <div class="container">
        <div class="row">
    
            <div class="col-lg-3 col-md-4 col-sm-6">col-lg-4</div>
            <div class="col-lg-3 col-md-4 col-sm-6">col-lg-4</div>
            <div class="col-lg-3 col-md-4 col-sm-6">col-lg-4</div>
            <div class="col-lg-3 col-md-4 hidden-md col-sm-6 hidden-xs">col-lg-4</div>
        </div>
    
    </div>

    </body>
    </html>

    bootstrap表单

    8.bootstrap 按钮

    (1)btn 声明按钮
    (2)btn-default 默认按钮样式
    (3)btn-primay
    (4)btn-success
    (5)btn-info
    (6)btn-warning
    (7)btn-danger
    (8)btn-link
    (9)btn-lg
    (10)btn-md
    (11)btn-xs
    (12)btn-block 宽度是父级宽100%的按钮
    (13)active
    (14)disabled
    (15)btn-group 定义按钮组

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>按钮</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">

    </script>

    </head>

    <body>

    <div class="container">
        <div class="row">
            <h2>按钮</h2>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <input type="button" value="按钮" class="btn btn-primary">
            <a href="" class="btn btn-success">btn-success按钮样式</a>
            <a href="" class="btn btn-info">btn-info按钮样式</a>
            <a href="" class="btn btn-warning">btn-warning按钮样式</a>
            <a href="" class="btn btn-danger">btn-danger按钮样式</a>
            <a href="" class="btn btn-link">btn-link按钮样式</a>
    
            <a href="" class="btn btn-danger active">active按钮</a>
            <a href="" class="btn btn-danger disabled">disabled按钮</a>
        </div>
        <br>
        <br>
        <br>
        <div class="row">
            <a href="#" class="btn btn-success btn-lg">大尺寸按钮</a>
            <a href="#" class="btn btn-info btn-md">中尺寸按钮</a>
            <a href="#" class="btn btn-warning btn-xs">小尺寸按钮</a>
            <a href="#" class="btn btn-danger">一般尺寸按钮</a>
        </div>
        <br>
        <br>
        <br>
        <div class="row">
            <a href="#" class="btn btn-success btn-block">宽度100%按钮</a>
        </div>
        <br>
        <br>
        <br>
        <!--全屏-->
        <div class="row">
            <div class="btn-ground btn-group-justified">
                <a href="" class="btn btn-primary">步骤一</a>
                <a href="" class="btn btn-default">步骤二</a>
                <a href="" class="btn btn-default">步骤三</a>
            </div>
    
        </div>
        <br>
        <br>
        <br>
        <!--一般大小-->
        <div class="row">
            <div class="btn-ground">
                <a href="#" class="btn btn-primary">步骤一</a>
                <a href="#" class="btn btn-default">步骤二</a>
                <a href="#" class="btn btn-default">步骤三</a>
            </div>
        </div>
        <br>
        <br>
        <br>
        <!--使用input要每个加btn-group-->
        <div class="row">
            <div class="btn-ground btn-group-justified">
                <div class="btn-group">
                    <input type="button" value="步骤一" class="btn btn-primary"></div>
                <div class="btn-group">
                    <input type="button" value="步骤二" class="btn btn-default"></div>
                <div class="btn-group">
                    <input type="button" value="步骤三" class="btn btn-default"></div>
            </div>
        </div>

    </body>
    </html>

    bootstrap表单

    转载于:https://blog.51cto.com/13742773/2342877

    展开全文
  • BootStrap 表单

    2017-03-13 21:41:48
    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 小妞妞做的表单实例: Bootstrap 教学意见调查表 body { padding-top: 150px; padding-bottom:...

    表单布局

    Bootstrap 提供了下列类型的表单布局:

    • 垂直表单(默认)

    • 内联表单

    • 水平表单




    小妞妞做的表单实例:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 教学意见调查表</title>
       <meta charset="utf-8">
       <link rel="stylesheet" href="css/bootstrap.min.css">
       <style>
      body {
    	  padding-top: 150px;
    	  padding-bottom: 40px;
    	  background-color: #D0E9C6;
    	  font-family: '楷体';
    	  font-size: 22px;
      }
    
      .col-sm-2 control-label.form-control{
    	  position: relative;
    	  height: 60px;
    	  -moz-box-sizing: border-box;
    	  box-sizing: border-box;
      }
      .form-horizontal{
      	max-width:800px;
        padding: 15px;
        margin: 0 auto;
       }
       </style>
    </head>
    <body>
    <div class="container">
      <form class="form-horizontal" role="form" action="#" method="post">
       <div class="form-group">
          <label for="name" class="col-sm-2 control-label">名字</label>
          <div class="col-sm-10">
             <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
          </div>
       </div>
       <div class="form-group">
          <label for="class" class="col-sm-2 control-label">班级</label>
          <div class="col-sm-10">
             <input type="text" class="form-control" id="lastname" placeholder="请输入班级">
          </div>
       </div>
       <div class="form-group">
          <label for="Student ID" class="col-sm-2 control-label">学号</label>
          <div class="col-sm-10">
             <input type="text" class="form-control" id="Student ID" placeholder="请输入学号">
          </div>
       </div>
        <div class="form-group">
          <label for="kemu" class="col-sm-2 control-label">科目名称</label>
          <div class="col-sm-10">
             <input type="text" class="form-control" id="kemu" placeholder="请输入科目名称">
          </div>
       </div>
       <div class="form-group">
        <label for="name2" class="col-sm-2 control-label">意见</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" rows="3">	
        </div>
       </div>
    
        <div  align="center">
           <input type="submit" class="btn-success" style="border-radius:5px; width: 120px;"  value="提交" />
            <input type="button" class="btn-info"  style="border-radius:5px; width: 120px;" value="取消" />
        </div>
    
        
        </form>
      </div>
      <script src="js/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
    </body>
    </html>
    效果图:

    参考地址:http://www.w3cschool.cn/bootstrap/bootstrap-v2-forms.html

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,042
精华内容 2,016
关键字:

bootstrap表单