【Bootstrap历练实例：表单控件状态(禁用)】的更多相关文章

Bootstrap历练实例：表单控件状态(禁用的字段集fieldset)

禁用的字段集 fieldset 对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件. <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap历练实例:表单控件状态(禁…

Bootstrap历练实例：表单控件状态(禁用)

禁用的输入框 input 如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Boots…

Bootstrap 表单控件状态(禁用状态)

Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”.和其他表单的禁用状态不同的是,Bootstrap框架做了一些样式风格的处理: 使用方法为:只需要在需要禁用的表单控件上加上“disabled”即可: <input class="form-control" type="text" placeholder="表单已禁用,不能输入" disabled> 运行效果如…

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单控件状态

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 表单控件状态</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css…

Bootstrap之表单控件状态

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

Bootstrap<基础六> 表单

Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列出了创建基本表单的步骤: 向父 <form> 元素添加 role="form". 把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间…

bootstrap学习笔记(表单)

1.基础表单 :对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制. fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: inherit; co…

Bootstrap历练实例：表单控件状态(焦点)

输入框焦点 当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:表单控件状态(焦点)</title> <m…

Bootstrap历练实例：响应式导航(带有表单)

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE-edge" /> <meta name="viewport"…

Bootstrap历练实例：导航中的表单

Bootstrap历练实例:导航中的表单,它是使用class.navbar-form类,这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为,使用这个对齐方式选项来决定导航栏中的内容放置在哪里. 实例: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>…

Bootstrap历练实例：表单帮助文件

Bootstrap表单控件可以在输入框input上有一个块级帮助文本,为了添加一个占用整个宽度的内容块,请在input后添加help-block. 实例: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:表单帮助文本<…

Bootstrap历练实例：表单控件大小

表单控件大小 您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度. 实例: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:表单控件大小</title> <met…

bootstrap历练实例： 导航元素中禁用的链接

对每个 .nav class,如果添加了 .disabled class,则会创建一个灰色的链接,同时禁用了该链接的 :hover 状态, <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>bootstrap历练实例: 导航元素中禁用的链接</ti…

Bootstrap历练实例：禁用的按钮

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap历练实例:禁用的按钮</title> <meta charset="utf-8" /> <meta name="viewp…

Bootstrap_表单_表单控件状态

一.焦点状态 焦点状态是通过伪类“:focus”来实现.Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果. <form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-6"> <input class="form-cont…

Bootstrap 历练实例-轮播(carousel)插件的事件

事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $('#identifier').on('slide.bs.carousel', function () { // 执行一些动作... }) slid.bs.carousel 当轮播完成幻灯片过渡效果时触发该事件. $('#identifier').on('slid.bs.carousel', funct…

Bootstrap 历练实例 - 折叠（Collapse）插件事件

事件 下表列出了折叠(Collapse)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.collapse 在调用 show 方法后触发该事件. $('#identifier').on('show.bs.collapse', function () { // 执行一些动作... }) shown.bs.collapse 当折叠元素对用户可见时触发该事件(将等待 CSS 过渡效果完成). $('#identifier').on('shown.bs.collaps…

Bootstrap 历练实例 - 折叠（Collapse）插件方法

方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $('#identifier').collapse({ toggle: false }) Toggle: .collapse('toggle') 切换显示/隐藏可折叠元素. $('#identifier').collapse('toggle') Show: .collapse('show') 显示可折叠元…

Bootstrap历练实例：警告框(Alert)插件事件

事件 下表列出了警告框(Alert)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 close.bs.alert 当调用 close 实例方法时立即触发该事件. $('#myalert').bind('close.bs.alert', function () { // 执行一些动作... }) closed.bs.alert 当警告框被关闭时触发该事件(将等待 CSS 过渡效果完成). $('#myalert').bind('closed.bs.alert', functi…

Bootstrap历练实例：弹出框(popover)事件

事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#mypopover').on('show.bs.popover', function () { // 执行一些动作... }) shown.bs.popover 当弹出框对用户可见时触发该事件(将等待 CSS 过渡效果完成). $('#mypopover').on('shown.bs.popover',…

Bootstrap历练实例：分页的大小

分页的大小 下面的实例演示了上表中所讨论的 class .pagination-* 的用法: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:分页的大小</title> <meta charset=&quo…

Bootstrap历练实例：分页状态

分页的状态 下面的实例演示了上表中所讨论的 class .disabled..active 的用法: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:分页状态</title> <meta charset=&…

bootstrap上传表单的时候上传的数据默认是0　一定要小心

bootstrap上传表单的时候上传的数据默认是0 一定要小心…

bootstrap+jQuery.validate表单校验

谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解 其实正则并不难,并且在学会后能带给你极大的成就感,享受那种事半功倍的效果吧. 2.ajax异步请求 在验证用户名是否存在.用户登录时账号或者密码错…

JavaScript 小实例 - 表单输入内容检测，对页面的增删改

JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页面写入数据 2.删除页面数据 + 删除提示[确实]才删除 3.获取表单输入的内容,并简单验证 4.打开一个新的窗口 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&…

Bootstrap历练实例：轮播(carousel)

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" /> <meta name="viewport"…

Bootstrap历练实例：响应式导航

<!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" /> <meta na…

Bootstrap 历练实例-轮播(carousel)插件方法

方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifier').carousel({ interval: 2000 }) .carousel('cycle') 从左到右循环轮播项目. $('#identifier').carousel('cycle') .carousel('pause') 停止轮播循环项目. $('#identifier')..car…

Bootstrap历练实例：简单的可折叠

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:简单的可折叠</title> <meta charset="utf-8" /> <meta name="viewpo…

Bootstrap 历练实例 - 按钮（Button）插件复选框

复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Boo…