编程 Javascript

Bootstrap表单简单实现代码

Posted in Javascript onMarch 06, 2017

本文实例为大家分享了Bootstrap表单的具体实现代码，供大家参考，具体内容如下

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

<!--
<style>
div{
width:100px;
height:100px;
margin-top:10px;
background:pink;
}
span{
width:100px;
height:100px;
margin-top:10px;
background:yellow;
}
</style>
-->
</head>
<body>
<!-- 内联表单 横向排列-->
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email">
</div>
</form>
<br/>

<!-- 水平表单,分配格数，总共12格 纵向排列-->
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-2 control-label" for="exampleInputEmail">Email address</label>
<div class="col-md-10">
<input type="email" class="form-control" id="exampleInputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="exampleInputEmail3">Password</label>
<div class="col-md-10">
<input type="password" class="form-control" id="exampleInputEmail3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<label><input type="checkbox">Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>

<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>

效果图：

Bootstrap表单简单实现代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap表单简单实现代码

- Author -

deepquiet

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js DataSet数据源处理代码

Mar 29 Javascript

JavaScript判断DOM何时加载完毕的技巧

Nov 11 Javascript

动态加载script文件的两种方法

Aug 15 Javascript

jQuery实现渐变弹出层和弹出菜单的方法

Feb 20 Javascript

AngularJS 2.0新特性有哪些

Feb 18 Javascript

React.js入门学习第一篇

Mar 30 Javascript

vuejs响应用户事件（如点击事件）

Mar 14 Javascript

推荐一个基于Node.js的表单验证库

Feb 15 Javascript

vue v-for 使用问题整理小结

Aug 04 Javascript

详解基于Vue/React项目的移动端适配方案

Aug 23 Javascript

vue 翻页组件vue-flip-page效果

Feb 05 Javascript

基于Ionic3实现选项卡切换并重新加载echarts

Sep 24 Javascript

微信小程序scroll-view实现横向滚动和上拉加载示例

Mar 06 #Javascript

Js自动截取字符串长度,添加省略号(……)的实现方法

Mar 06 #Javascript

Bootstrap显示与隐藏简单实现代码

Mar 06 #Javascript

jQuery时间验证和转换为标准格式的时间格式

Mar 06 #Javascript

Bootstrap导航中表单简单实现代码

Mar 06 #Javascript

基于JS实现仿百度百家主页的轮播图效果

Mar 06 #Javascript

JS字符串长度判断,超出进行自动截取的实例(支持中文)

Mar 06 #Javascript