Bootstrap系列 -- 20. 禁用状态

简介:   Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”   在使用了“form-control”的表单控件中,样式设置了禁用表单背景色为灰色,而且手型变成了不准输入的形状。

 

  Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”

  在使用了“form-control”的表单控件中,样式设置了禁用表单背景色为灰色,而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”,禁用的控件只会有一个不准输入的手型出来

 

  在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态。

 

  

<h3>示例1</h3>
<form role="form" class="form-horizontal">
  <div class="form-group">
    <div class="col-xs-6">
      <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
    </div>
    <div class="col-xs-6">
      <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用,不可输入" disabled>
    </div>
  </div> 
</form> 
<br>
<br>
<br>
<h3>示例2</h3>   
<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">禁用的输入框</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
    </div>
    <div class="form-group">
      <label for="disabledSelect">禁用的下拉框</label>
      <select id="disabledSelect" class="form-control">
        <option>不可选择</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> 无法选择
      </label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </fieldset>
</form> 
<br>
<br>
<br>
<h3>示例3</h3>
<form role="form">
  <fieldset disabled>
    <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" /></legend>
    <div class="form-group">
      <label for="disabledTextInput">禁用的输入框</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
    </div>
    <div class="form-group">
      <label for="disabledSelect">禁用的下拉框</label>
      <select id="disabledSelect" class="form-control">
        <option>不可选择</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> 无法选择
      </label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </fieldset>
</form>  

 

  整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用

相关文章
|
5月前
|
缓存
keep-alive 组件有哪些常用的属性和配置选项
keep-alive 组件有哪些常用的属性和配置选项
|
JavaScript
js设置启用禁用
js设置启用禁用
|
前端开发 JavaScript
Bootstrap Table pagelist设置后失效
Bootstrap Table pagelist设置后失效
285 0
Bootstrap Table pagelist设置后失效
|
JavaScript 应用服务中间件 nginx
Nginx部署vue项目,刷新后找不到界面或者刷新报500 Internal Server Error
Nginx部署vue项目,刷新后找不到界面或者刷新报500 Internal Server Error
1561 0
|
Web App开发 前端开发
如何停止在Joomla中多次加载Bootstrap
Bootstrap是用于构建和设计网站的最受欢迎的CSS框架。开发人员和设计师都很依赖它。
如何停止在Joomla中多次加载Bootstrap
|
前端开发
Bootstrap系列 -- 28. 下拉菜单状态
  下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus)。   下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled)。这两种状态使用方法只需要在对应的菜单项上添加对应的类名 下拉菜单 ...
678 0
|
前端开发
Bootstrap系列 -- 19. 焦点状态
  表单主要用来与用户沟通,好的表单就能更好的与用户进行沟通,而好的表单一定离不开表单的控件状态。     表单状态的作用:   每一种状态都能给用户传递不同的信息,比如表单有焦点的状态可以告诉用户可以输入或选择东西,禁用状态可以告诉用户不可以输入或选择东西,还有就是表单控件验证状态,可以告诉用户的操作是否正确等。
900 0
|
前端开发
Bootstrap系列 -- 8. 代码显示
一. Bootstrap中的代码块   代码块一般在博客中使用的较多,比较博客园中提供的贴代码. 在Bootstrap中提供了三种形式的代码显示   1. 使用来显示单行内联代码   2. 使用来显示多行块代码   3.
804 0
在启用属性的情况下启动 Confluence 6
在一些情况下,你可以希望 Confluence 在系统启动的时候就对属性文件进行打印。如果你的 Confluence 经常进行重启,并且你可能忘记来启动针对系统诊断的属性文件日志开关。
1195 0