首页 > html教程 > 正文

Bootstrap中的按钮样式,图片样式 介绍

转载 2018-10-13 17:22:40 0 770
赞助会员专享特权
本篇文章就给大家介绍Bootstrap中的按钮与表单结合的样式,图片样式。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问:bootstrap教程

Bootstrap按钮样式

1. 表单组

.form-group : 把表单组合起来

.form-control : 将样式设置为 width为100% ,圆角边框,适当的蓝色阴影...

格式:

<form>
   <p class="form-group">
   <label></label>
   <input type="text" class="form-control"/>
   </p>
</form>

注意:只有正确设置了输入框的 type 类型,才能被赋予正确的样式。

2. 内联表单

.form-inline : 让表单左对齐浮动,排成一行

格式:

<form class="form-inline">
   <input type="text" class="form-control"/>
   <input type="text" class="form-control"/>
</form>

3. 表单合组

.input-group : 和 form-group 作用一样,在合组的时候使用

.input-group-addon : 要合组的一个元素

格式:

<form>
   <p class="input-group">
   <p class="input-group-addon">合组</p>
   <input type="text" class="form-control"/>
   </p>
</form>

4. 水平排列

.form-horizontal : 水平排列的表单,通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了

格式:

<form class="form-horizontal">
   <p class="form-group">
   <label></label>
   <input.../>
   </p>
</form>

5. 单选复选框

.checkbox : 复选框的父级元素使用,将复选框变为块级元素

.checkbox-inline : 复选框的父级元素使用,将复选框拍成一行

.radio : 单选框的父级元素使用,将单选框变为块级元素

.radio-inline : 单选框的父级元素使用,将单选框拍成一行

格式:

<form>
   <p class="radio">
   <label>
   <input type="radio" name="check" id="" value="" />选择1
   </label>
   </p>
   <p class="radio">
   <label>
   <input type="radio" name="check" id="" value="" />选择2
   </label>
   </p>
</form>

6. 下拉列表

.from-control : 将样式设置为 width为100% ,圆角边框,适当的蓝色阴影...

格式 :

<form>
   <select class="form-control">
   <option>下拉列表1</option>
   <option>下拉列表2</option>
   </select>
</form>

7. 校验状态

改变获取焦点时边框和阴影的颜色

.has-error : 错误的红色

.has-success : 成功的绿色

.has-warning : 警告的黄色

.control-label : 标签同步相应状态

格式 :

<form>
   <p class="form-group has-warning">
   <label for="user" class="control-label">用户</label>
   <input type="text" class="form-control" id="user" placeholder="请输入用户名"/>
   </p>
</form>

control-label 这个类是 label 同步相应的状态

8. 添加额外的图标

.has-feedback : 设置一个位置

.form-control-feedback : 设置一个元素,相对于有has-feedback类的元素定位

.glyphicon glyphicon-ok : 对号图标

.glyphicon-warning-sign : 警告图标

glyphicon-remove : 错误图标

....

格式 :

<p class="form-group has-feedback">
   <input type="text" class="form-control">
   <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</p>

给 span 设置 form-control-feedback 这个类,让它相对于 has-feedback 进行定位,定位到input 框里面的右侧

9. 控制输入框大小

.input-lg : 大输入框

.input-small : 小输入框

.form-group-lg : 大输入框

.form-group-sm : 小输入框

格式 :

<input type="text" class="form-control input-sm">

或者直接给父元素设置

<p class="form-group-lg"></p>

响应式图片:

.img-responive : 图片会跟随屏幕的缩放而缩放

.img-rounded : 圆角矩形图片

.img-circle : 圆形图片

.img-thumbnail : 给图片加一个边框

以上就是Bootstrap中的按钮样式,图片样式 介绍的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:Bootstrap 按钮样式 图片样式
  • 本文转载于:CSDN,如有侵犯,请联系删除
  • 相关文章


  • Bootstrap按钮下拉菜单组件详解_javascript技巧
  • Bootstrap按钮组件详解_javascript技巧
  • Bootstrap按钮式下拉菜单实例教程
  • Bootstrap按钮组的实例详解
  • Bootstrap按钮组的详细介绍
  • 如何使用Bootstrap 按钮实例详解(代码实例)
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • bootstrap响应式开发教程 bootstrap响应式开发教程
  • 麦子学院bootstrap入门视频教程 麦子学院bootstrap入门视频教程
  • 黑马程序员bootstrap视频教程 黑马程序员bootstrap视频教程
  • 9天学会html+css+bootstrap视频教程 9天学会html+css+bootstrap视频教程
  • 快速入手BootStrap视频教程 快速入手BootStrap视频教程
  • BootStrap插件讲解视频教程 BootStrap插件讲解视频教程
  • 相关视频章节