Boostrap 中的 CSS - 表格 form

1. 基础表单

在Bootstrap框架中,通过定制了一个类名 form-control,也就是说,使用了类名form-control,将会实现一些设计上的定制效果。

  1. 宽度变成了100%
  2. 设置了一个浅灰色#ccc的边框
  3. 具有 4p x的圆角
  4. 设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
  5. 设置了placeholder(输入框的提示文字)的颜色为 #999 这个类一般用于输入框

1.1 内联表单

只需要给form加上下面.form-inline这个类就可以实现表单元素在一行排列

1.2 水平表单

待添加

2. input 输入框

为了让控件在各种表单风格中样式不出错,需要添加类名form-control,如:<input type="email" class="form-control" placeholder="请输入您的邮箱">

3. 按钮 Button

  • input[type="submit"]:提交按钮
  • input[type="button"]:普通按钮
  • input[type="reset"]:重置按钮
  • <button></button>:按钮元素,(默认行为是提交)

在Bootstrap框架中的按钮都是采用<button>来实现。

3.1 情景按钮



注:
Bootstrap中的按钮,第一前提是必须添加 btn 这个类,其他的各种类,都只能添加到其后。所以一个按钮应该是这个样子的:<button class="btn btn-info" >信息按钮</button>,若还有其他的样式,往btn-info后添加,充分利用 css 的层叠特性。

3.2 按钮大小

3.3 块状按钮

Bootstrap框架中提供了一个类名btn-block。使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮称为块状按钮。同样添加到btn类后即可生效。

3.4 活动与禁用状态

活动状态
Bootstrap 按钮的活动状态主要包括按钮的悬浮状态:hover,点击状态:active和焦点状态:focus几种。
通过在源码中我们可以看到,Bootstrap对于每一种风格的按钮都做了单独的定制。需要进行修改的话可以参考源码!

禁用状态
在Bootstrap框架中,要禁用按钮有两种实现方式:

  • 在标签中添加disabled属性
  • 在元素标签中添加类名.disabled
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,936评论 3 184
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,071评论 0 66
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,261评论 4 61
  • 亲爱的雨涵: 昨天我们一起看电视剧,看到12点,爸爸出来说了一句“这么晚还在看啊?”你非常大声地对爸爸大吼“哎呀你...
    方怡阅读 199评论 0 0