<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap form</title>
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.css" />
<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-xs-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<form role="form" class="form-vertical">
<div class="form-group" >
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="text" class="form-control" id="age" placeholder="请输入年龄">
</div>
<div class="form-group">
<label for="sex">性别</label>
<div class="checkbox-inline">
<label><input type="checkbox" name="sex" value="1">男</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="sex" value="2">女</label>
</div>
</div>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="option2" checked> 女
</label>
</div>
</div>
<div class="form-group">
<label for="remark">备注</label>
<textarea class="form-control" id="remark" placeholder="请输入备注" rows="3"></textarea>
</div>
<div class="form-group">
<span class="help-block">
提醒，如果你没有什么，就不要输入了。
</span>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
将Bootstrap表单构造器与CodeIgniter结合，可以极大地提升开发效率，同时保持项目的整洁和可维护性。 在实际应用中，开发者可以将表单构造器集成到现有的Web应用程序中，或者作为一个独立的模块供多个项目共享。...
Bootstrap表单验证是一种在网页开发中常用的技术，用于确保用户在提交表单前输入的数据有效、完整且符合预设规则。Bootstrap，一个流行的前端开发框架，提供了美观的UI组件和强大的交互功能，其中包括表单验证功能。...
4. **Bootstrap表单验证状态**：Bootstrap还提供了表单验证状态样式，如`.has-error`（现在推荐使用`.is-invalid`），`.has-warning`和`.has-success`，这些类可以改变输入框、标签和帮助文本的样式，以反馈用户的...
2. 创建一个Bootstrap表单，定义需要验证的表单字段。 3. 初始化BootstrapValidator，设置验证规则和选项。 4. 处理验证结果，例如展示错误信息或提交表单。 通过上述介绍，我们可以看出BootstrapValidator是一个...
在这个“bootstrap表单页面练习”中，我们可以深入学习如何利用Bootstrap的组件和样式来创建功能完备且美观的表单页面。 首先，让我们了解一下Bootstrap的基本概念。Bootstrap是由Twitter开发并开源的一个HTML、CSS...
对于刚开始使用bootstrap前台框架的朋友来说,表单验证或许是必不可少的。本案例中有常见的格式校验公大家参考，好不容易找到了，给需要的朋友分享一下,不需要积分,有个csdn账号即可，免去积分下载的困扰
这个"08.Bootstrap表单样式1.rar"压缩包文件，显然包含了一个关于如何使用Bootstrap来设计和实现表单样式的教学资源，特别关注了C#开发者可能感兴趣的应用场景。 Bootstrap的核心在于其响应式网格系统、预定义的...
在这个"Twitter Bootstrap表单验证.zip"压缩包中，重点是关于如何使用Bootstrap来实现表单验证的功能。 表单验证在Web开发中至关重要，它确保用户输入的数据符合预设的规则，例如邮箱格式、手机号码格式或必填字段...
在"10.Bootstrap表单样式3"这个主题中，我们主要关注如何利用Bootstrap来设计美观且功能丰富的表单。C#是一种广泛应用于Web开发的编程语言，尤其是在ASP.NET框架中，它与Bootstrap相结合，可以创建出强大的Web应用...
在本文中，我们将深入探讨如何使用HTML5（H5）技术来实现仿Bootstrap表单输入框的焦点高光效果。Bootstrap作为一款流行的前端框架，以其简洁、强大的样式和交互设计深受开发者喜爱。当我们聚焦到表单输入框时，...
通过以上步骤，你就可以在Bootstrap表单中实现浮动标签效果，提高用户的填写体验。这种设计模式特别适合在移动设备上使用，因为它能有效利用有限的屏幕空间，使表单看起来更简洁、更清晰。 总结来说，Bootstrap-...
Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单，使用 Laravel 验证 Laravel-Bootstrap-Modal-Form你的Laravel 应用程序的表单验证扩展插件。 在将 Bootstrap 窗体嵌入到 Bootstrap/jquery模式...
用bootstrap的栅格“ coll-md- ”命令设置宽度总是不尽人意，有时上下框对不齐，有时上下宽度又不齐，这时建议用“style=”width:100px” “ <form class=form-horizontal > <label class=col-sm-2 ...
BForms, 用于 ASP.NET MVC的Bootstrap 表单 Bootstrap 支持 ASP.NET MVC控件BForms开源框架由一个由 ASP.NET MVC 。Javascript 。Javascript和自定义CSS组成的Collection 框架组成，它扩展了 Twitter
Bootstrap动态表单是一种高效、灵活的用户界面设计方式，它允许开发者在运行时根据需要创建和修改表单结构。在Web应用中，这种能力尤为重要，因为它可以满足不同用户的需求，或者适应不断变化的数据输入需求。...
总的来说，Bootstrap Form Builder是一款非常实用的工具，它极大地简化了Bootstrap表单的创建过程，同时也提供了足够的灵活性以满足各种复杂的需求。无论你是开发者还是非技术背景的网站管理员，都能从中受益，快速...
一款不错的基于bootstrap表单登录模板
Bootstrap 表单制作代码 Bootstrap 是一个功能强大且流行的前端框架，对于web开发者来说是一个非常重要的工具。今天，我们将详细介绍 Bootstrap 表单的制作代码，了解 Bootstrap 提供的表单布局类型，并且通过一个...
本文将深入解析Bootstrap表单控件的使用方法，帮助开发者更好地理解和应用这些组件。 1. 输入框(input) Bootstrap中的输入框通常是单行文本输入，通过设置`<input>`标签的`type`属性为`text`。为了确保输入框与...