为了账号安全,请及时绑定邮箱和手机立即绑定

玩转Bootstrap(基础)

  • 按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现: input[type=“submit”] input[type=“button”] input[type=“reset”] <button>
    查看全部
  • 以前学radio的时候经常会弄混"name"、"value"和选择框文本三个东西。这里说明一下:1.radio是按组来区分选择框的,“name”其实是组名,只有选择框的“name”相同才表明同组,这样才可以实现单选,试想一下,如果不同组那你选你的我选我的就都可以勾选了也就不是单项选择框了;2.“value”代表的是这个选择框的值,是提交服务器用的,因为服务器要识别选择框的值,所以“value”的值必须不同这样才能区分不同选择框;3.选择框文本直接在<input>标签后写上就行。总结一句就是"name"必须相同,"value"必须不同,文本在标签之后。
    查看全部
  • 1、不管是checkbox还是radio都使用label包起来了 2、checkbox连同label标签放置在一个名为“.checkbox”的容器内 3、radio连同label标签放置在一个名为“.radio”的容器内 在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式
    查看全部
  • 将表单的控件都在一行内显示 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline” 如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在容器“form-group”中 在label标签运用了一个类名“sr-only”,标签没显示就是这个样式将标签隐藏了
    查看全部
    0 采集 收起 来源:内联表单

    2018-03-22

  • 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1、在<form>元素是使用类名“form-horizontal”。 2、配合Bootstrap框架的网格系统。(网格布局会在以后的章节中详细讲解) 在<form>元素上使用类名“form-horizontal”主要有以下几个作用: 1、设置表单控件padding和margin值。 2、改变“form-group”的表现形式,类似于网格系统的“row”。
    查看全部
    0 采集 收起 来源:水平表单

    2018-03-22

  • role="form" 为了给有阅读障碍的人使用读屏软件所使用的属性,加上是一个良好习惯
    查看全部
    0 采集 收起 来源:基础表单

    2018-03-22

  • 基础表格 table-condensed 斑马线表格 table-stripped 带边框的 table-bordered 悬浮高亮的 table-hover 紧凑型 table-condensed
    查看全部
  • “.table”主要有三个作用: 给表格设置了margin-bottom:20px以及设置单元内距 在thead底部设置了一个2px的浅灰实线 每个单元格顶部设置了一个1px的浅灰实线
    查看全部
  • 在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果。 1、.has-warning:警告状态(黄色) 2、.has-error:错误状态(红色) 3、.has-success:成功状态(绿色) 使用的时候只需要在form-group容器上对应添加状态类名。 很多时候,在表单验证的时候,不同的状态会提供不同的 icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起。
    查看全部
  • 1、不管是checkbox还是radio都使用label包起来了 2、checkbox连同label标签放置在一个名为“.checkbox”的容器内 3、radio连同label标签放置在一个名为“.radio”的容器内 css里的' + '代表相邻的元素,即元素的下一个元素 <div class="checkbox"> <label> <input type="checkbox" value="yes"> 记住密码 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked> 喜欢 </label> </div>
    查看全部
  • 只需要在需要禁用的表单控件上加上“disabled”即可
    查看全部
  • Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。
    查看全部
  • 多行选择设置multiple属性的值为multiple. <form role="form"> <div class="form-group"> <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </form>
    查看全部
  • 为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”。 使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的。
    查看全部
  • 在label标签运用了一个类名“sr-only”,标签没显示就是这个样式将标签隐藏了 内联表单:将表单的控件都在一行内显示,在<form>元素中添加类名“form-inline”即可。
    查看全部
    0 采集 收起 来源:内联表单

    2018-03-22

举报

0/150
提交
取消
课程须知
本教程适合具有一定前端基础的人员,对HTML和CSS有一定的了解,对于定制Bootstrap的同学需要具备LESS和Sass基础知识。
老师告诉你能学到什么?
1、了解Bootstrap框架 2、如何使用Bootstrap制作Web页面或Web应用程序 3、如何定制个性化Bootstrap

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!