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

玩转Bootstrap(基础)

  • 和input等表单控件一样,在Bootstrap框架的按钮中也具有禁用状态的设置。禁用状态与其他状态按钮相比,就是背景颜色的透明度做了一定的处理,opcity的值从100%调整为65%。

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

    方法1:在标签中添加disabled属性

    方法2:在元素标签中添加类名“disabled”

    两者的主要区别是:

    “.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题,如果通过类名“.disable”来禁用按钮,其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。


    查看全部
  • Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮称为块状按钮。

    使用方法和前面的类似,只需要在原按钮类名上添加“.btn-block”类名,当然“.btn”类名是不可或缺的:

    <button class="btnbtn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
    <button class="btnbtn-primary btn-block" type="button">正常按钮</button>
    <button class="btnbtn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
    <button class="btnbtn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>


    查看全部
    0 采集 收起 来源:块状按钮

    2019-10-12

  • 在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现,在使用过程中,开发者只需要选择不同的类名即可:

    使用起来就很简单,就像前面介绍的默认按钮一样的使用方法,只需要在基础按钮“.btn”基础上追加对应的类名,就可以得到需要的按钮风格。如:

    <button class="btn" type="button">基础按钮.btn</button>
    <button class="btn btn-default" type="button">默认按钮.btn-default</button>
    <button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
    <button class="btn btn-success" type="button">成功按钮.btn-success</button>
    <button class="btn btn-info" type="button">信息按钮.btn-info</button>
    <button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
    <button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
    <button class="btn btn-link" type="button">链接按钮.btn-link</button>

    运行效果如下或查看右侧结果窗口:


    查看全部
    0 采集 收起 来源:定制风格

    2019-10-12

  • 一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等。同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。

    查看全部
    0 采集 收起 来源:多标签支持

    2019-10-12

  • Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色

    查看全部
    0 采集 收起 来源:默认按钮

    2019-10-12

  • 在Bootstrap V2.x版本中还提供了一个行内提示信息,其使用了类名“help-inline”。一般让提示信息显示在控件的后面,也就是同一水平显示。如果你想在BootstrapV3.x版本也有这样的效果,你可以添加这段代码:

    查看全部
    0 采集 收起 来源:表单提示信息

    2019-10-12

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

    查看全部
    0 采集 收起 来源:表单提示信息

    2019-10-12

  • <span class="glyphicon glyphicon-remove form-control-feedback"></span>

    查看全部
  • 而且必须在表单中添加了一个 span 元素:

    查看全部
  • 很多时候,在表单验证的时候,不同的状态会提供不同的 icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起:

    查看全部
  • 在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果。
    1、.has-warning:警告状态(黄色)
    2、.has-error:错误状态(红色)
    3、.has-success:成功状态(绿色)
    使用的时候只需要在form-group容器上对应添加状态类名。

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

    查看全部
  • 只需要在需要禁用的表单控件上加上“disabled”即可:

    <input class="form-control" type="text" placeholder="表单已禁用,不能输入" disabled>

    运行效果如下或查看右侧结果窗口:

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


    查看全部
  • 前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:
    1、input-sm:让控件比正常大小更小
    2、input-lg:让控件比正常大小更大

    这两个类适用于表单中的input,textarea和select控件


    查看全部
    0 采集 收起 来源:表单控件大小

    2019-10-12

  • 有时候,为了布局的需要,将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑:
    1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
    2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”

    <div class="form-group">
          <label class="radio-inline">
            <input type="radio"  value="option1" name="sex"> 男性
          </label>
          <label class="radio-inline">
            <input type="radio"  value="option2" name="sex"> 女性
          </label>
          <label class="radio-inline">
            <input type="radio"  value="option3" name="sex"> 中性
          </label>
    </div>


    查看全部

举报

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

微信扫码,参与3人拼团

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

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