bootstrap表单 | 易学教程

4.4、Bootstrap V4自学之路------组件---表单

阅读更多关于 4.4、Bootstrap V4自学之路------组件---表单

表单控件下面是一个Bootstrap支持的表控件以及自定义类的完整列表。额外的文档对每个组都是可用的。类作用支持的变量 .form-group 表单控件的任一组用在任何块级元素上，比如说 <fieldset> 或 <div> .form-control 文本域控件 text 、 password 、 datetime 、 datetime-local 、 date 、 month 、 time 、 week 、 number 、 email 、 url 、 search 、 tel 、 color 选择菜单 multiple 、 size 多行文本域 N/A .form-control-file 文件上传控件 file .radio .radio-inline .checkbox .checkbox-inline 复选框和单选钮 N/A PS：镇山之宝！例子在后续使用中来写！那么一长串的例子，吓死宝宝了。表单布局因为Bootstrap对几乎所有的表单控件都应用了 display:block 以及 width:100% ，所以表单默认是纵向堆叠的。可以用附加的类来基于表单改变这种布局。表单组 .form-group类是向表单添加一些结构的最简单的方法。可是使用在<fieldset>、<div>甚至别的元素上。 <fieldset> 定义围绕表单中元素的边框。

Bootstrap布局

阅读更多关于 Bootstrap布局

目录 Bootstrap布局 1 概览 1.1 移动设备优先 1.2 Normalize.css 1.3 布局容器 2 栅格系统 2.1 栅格系统简介 2.2 栅格参数 2.3 栅格系统使用 2.4 不同屏幕设置不同宽度 2.5 列偏移 2.6 列位置移动 3 排版 3.1 标题 3.2 突出显示 3.3 对齐 3.4 改变大小写 3.5 引用 3.6 列表 4 代码 4.1 内联代码 4.2 用户输入 4.3 代码块 4.3 变量 4.4 程序输出 5 表格 5.1 基本 5.2 条纹状表格 5.3 带边框的表格 5.4 鼠标悬停 5.5 紧缩表格 5.6 状态类 5.7 响应式表格 6 表单 6.1 基本实例 6.2 内联表单 6.3 水平排列的表单 6.4 表单控件 7 按钮 7.1 可作为按钮使用的标签或元素 7.2 预定义样式 7.3 尺寸 7.4 激活状态 7.5 禁用状态 8 图片 8.1 响应式图片 8.2 图片形状 9 辅助类 9.1 文本颜色 9.2 背景色 9.3 三角符号 9.4 浮动 9.5 让内容块居中 9.6 清除浮动 9.7 显示或隐藏内容 9.10 图片替换 10 响应式工具 10.1 不同视口下隐藏显示 10.2 打印类 Bootstrap布局 1 概览 1.1 移动设备优先为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加

Bootstrap笔记（二）

阅读更多关于 Bootstrap笔记（二）

目录一、栅格布局二、表单样式三、字体图标：图标的class在http://w3c.3306.biz/bootstrap/e g/bootstrap--glyphicons-list.html里查找配合span即可使用四、下拉菜单五、轮播一、栅格布局将当前标签（容器）布局按表格进行分割，行数不限，总共有12列（12个单位长度）。 1、基本类 row 设置一行 col-md-n 设置当前标签占据n个单位长度（n取值范围1-12） 2、栅格参数（实现响应式布局，即在不同分辨率如手机，平板上也可达到相同效果） col-xs-n 设置手机当前占据n个单位长度（n取值范围1-12）(<768px) col-sm-n 设置平板当前占据n个单位长度（n取值范围1-12）(≥768px) col-md-n 设置电脑当前占据n个单位长度（n取值范围1-12）(≥992px) col-lg-n 设置大桌面显示器当前占据n个单位长度（n取值范围1-12）(≥1200px) 3、列偏移和列嵌套 col-md-offset-n 设置电脑偏移n个单位长度 col-sm-n 在列里面再嵌套一个栅格布局（包含行和列），行仍使用row的class属性，列需要使用col-sm-n来表示列的单位个数。取值范围不能超过剩下的单位长度（即12-前面已使用的单位长度）二、表单样式 1、补充label标签知识

Bootstrap中的内联表单

阅读更多关于 Bootstrap中的内联表单

内联表单为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。可能需要手动设置宽度在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto; ，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。一定要添加 label 标签如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label 、 aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。 Name Email 复制 <form class= "form-inline" > <div class= "form-group" > <label for= "exampleInputName2" > Name </label>

Bootstrap 表单

阅读更多关于 Bootstrap 表单

在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标记和扩展的类即可创建出不同样式的表单。表单布局 Bootstrap 提供了下列类型的表单布局：垂直表单（默认）内联表单水平表单垂直或基本表单基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：向父 <form> 元素添加 role="form" 。把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control 。 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本表单</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <form role="form">

Bootstrap框架

阅读更多关于 Bootstrap框架

Bootstrap框架 Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。它支持响应式布局，并且在V3版本之后坚持移动设备优先。为什么要使用Bootstrap？在Bootstrap出现之前：命名：重复、复杂、无意义（想个名字费劲）样式：重复、冗余、不规范、不和谐页面：错乱、不规范、不和谐在使用Bootstrap之后：各种命名都统一并且规范化。页面风格统一，画面和谐。 Bootstrap下载官方地址：https://getbootstrap.com 中文地址：http://www.bootcss.com/ 我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。 Bootstrap环境搭建目录结构： bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme.css // Bootstrap主题样式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主题相关样式压缩文件 │ ├── bootstrap-theme.min.css.map │ ├── bootstrap

【BootStrap】表单案例

阅读更多关于【BootStrap】表单案例

BootStrap表单组件详细文档请查看BootStrap中文网，这里只列举几种效果供参考效果1： <form action="" class="form-horizontal"> <div class="form-group"> <label for="" class="col-sm-2 control-label">name</label> <div class="col-sm-4 input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span> <input type="text" class="form-control"> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">education</label> <div class="col-sm-4 input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-education "></span> </span> <input type="text" class=

Bootstrap表单布局样式

阅读更多关于 Bootstrap表单布局样式

源代码 < form class ="form-horizontal" role ="form" > < fieldset > < legend > 配置数据源 </ legend > < div class ="form-group" > < label class ="col-sm-2 control-label" for ="ds_host" > 主机名 </ label > < div class ="col-sm-4" > < input class ="form-control" id ="ds_host" type ="text" placeholder ="192.168.1.161" /> </ div > < label class ="col-sm-2 control-label" for ="ds_name" > 数据库名 </ label > < div class ="col-sm-4" > < input class ="form-control" id ="ds_name" type ="text" placeholder ="msh" /> </ div > </ div > < div class ="form-group" > < label class ="col-sm-2 control-label" for ="ds_username"

订阅 bootstrap表单