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

玩转Bootstrap(基础)

  • 基本按钮 Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮一样,都是通过类名“btn”来实现。不同的是在V3.x版本要简约很多,去除了V2.x版本中的大量的CSS3中的部分特效,比如说文本阴影(text-shadow)、渐变背景(background-image)、边框阴影(box-shadow)等。
    查看全部
    0 采集 收起 来源:基本按钮

    2018-03-22

  • 按钮 按钮也是Bootstrap框架核心内容之一。因为按钮是Web制作中不可缺少的东西。而且不同的Web页面具有不同的按钮风格,甚至说同一个Web网站或应用程序具有多种按钮风格,比如说不同的按钮颜色、大小和状态等。那么Bootstrap框架也考虑了这些因素,接下来的内容我们一起来探讨Bootstrap框架中的另一核心部分内容——按钮。
    查看全部
    0 采集 收起 来源:按钮

    2018-03-22

  • 表单提示信息 平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部。
    查看全部
    0 采集 收起 来源:表单提示信息

    2018-03-22

  • 表单控件状态(验证状态) 在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果。 1、.has-warning:警告状态(黄色) 2、.has-error:错误状态(红色) 3、.has-success:成功状态(绿色)
    查看全部
  • 表单控件状态(禁用状态) Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”。和其他表单的禁用状态不同的是,Bootstrap框架做了一些样式风格的处理: 使用方法为:只需要在需要禁用的表单控件上加上“disabled”即可: <input class="form-control" type="text" placeholder="表单已禁用,不能输入" disabled>
    查看全部
  • 表单控件状态(焦点状态) 表单主要用来与用户沟通,好的表单就能更好的与用户进行沟通,而好的表单一定离不开表单的控件状态。 表单状态的作用: 每一种状态都能给用户传递不同的信息,比如表单有焦点的状态可以告诉用户可以输入或选择东西,禁用状态可以告诉用户不可以输入或选择东西,还有就是表单控件验证状态,可以告诉用户的操作是否正确等。那么在Bootstrap框架中的表单控件也具备这些状态。 焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果。
    查看全部
  • 表单控件大小 前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是: 1、input-sm:让控件比正常大小更小 2、input-lg:让控件比正常大小更大
    查看全部
    0 采集 收起 来源:表单控件大小

    2018-03-22

  • 表单控件(按钮) 按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现: ☑ input[type=“submit”] ☑ input[type=“button”] ☑ input[type=“reset”] ☑ <button>
    查看全部
  • 表单控件(复选框和单选按钮水平排列) Bootstrap框架也做了这方面的考虑: 1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline” 2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”
    查看全部
  • 表单控件(复选框checkbox和单选择按钮radio) 1、不管是checkbox还是radio都使用label包起来了 2、checkbox连同label标签放置在一个名为“.checkbox”的容器内 3、radio连同label标签放置在一个名为“.radio”的容器内 在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。
    查看全部
  • 表单控件(文本域textarea) 文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
    查看全部
  • 表单控件(下拉选择框select) Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。
    查看全部
  • 表单控件(输入框input) 每一个表单都是由表单控件组成。离开了控件,表单就失去了意义。接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识。 单行输入框,常见的文本输入框,也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的。
    查看全部
  • 内联表单 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可。 内联表单实现原理非常简单,欲将表单控件在一行显示,就需要将表单控件设置成内联块元素(display:inline-block)。
    查看全部
    0 采集 收起 来源:内联表单

    2018-03-22

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

    2018-03-22

举报

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

微信扫码,参与3人拼团

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

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