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

玩转Bootstrap(基础)

  • 禁用状态与其他状态按钮相比,就是背景颜色的透明度做了一定的处理,opcity的值从100%调整为65%。 在Bootstrap框架中,要禁用按钮有两种实现方式: 方法1:在标签中添加disabled属性 方法2:在元素标签中添加类名“disabled” 两者的主要区别:在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的
    查看全部
  • 在Bootstrap框架中针对按钮的状态效果主要分为两种:活动状态和禁用状态。 Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover),点击状态(:active)和焦点状态(:focus)几种。 当按钮处理正在点击状态(也就是鼠标按下的未松开的状态),对于<button>元素是通过“:active”伪类实现,而对于<a>这样的标签元素则是通过添加类名“.active”来实现。
    查看全部
  • <div class="dropdown dropup"> <button type="button" class="btn btn-default" data-toggle="dropdown">按钮下拉菜单<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">按钮下拉菜单项</a></li> <li><a href="#">按钮下拉菜单项</a></li> <li><a href="#">按钮下拉菜单项</a></li> <li><a href="#">按钮下拉菜单项</a></li> </ul> </div>
    查看全部
  • 外部容器.btn-group 追加.dropup
    查看全部
  • 外部容器div.btn-group
    查看全部
    0 采集 收起 来源:按钮下拉菜单

    2015-02-13

  • .btn-group-justified 特别声明:在制作等分按钮组时,请尽量使用<a>标签元素来制作按钮,因为使用<button>标签元素时,使用display:table在部分浏览器下支持并不友好
    查看全部
  • .btn-group-vertical 按钮的垂直分组
    查看全部
  • 有时候在制作按钮的时候需要按钮宽度充满整个父容器(width:100%),特别是在移动端的制作中。 Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮称为块状按钮。
    查看全部
    0 采集 收起 来源:块状按钮

    2015-02-12

  • 在Bootstrap框架中控制按钮的大小都是通过修改按钮的padding、line-height、font-size和border-radius几个属性。 .btn-lg 大型按钮 .btn-sm 小型按钮 .btn-xs 超小型按钮
    查看全部
    0 采集 收起 来源:按钮大小

    2015-02-12

  • ,唯一需要注意的是,要在制作按钮的标签元素上添加类名“btn”
    查看全部
    0 采集 收起 来源:多标签支持

    2015-02-12

  • 一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等。 虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮。
    查看全部
    0 采集 收起 来源:多标签支持

    2018-03-22

  • 默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。
    查看全部
    0 采集 收起 来源:默认按钮

    2015-02-12

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

    2015-02-12

  • .btn 基础按钮 .btn-default 默认按钮 .btn-primary 主要按钮 .btn-success 成功按钮 .btn-info 信息按钮 .btn-warning 警告按钮 .btn-danger 危险按钮 .btn-link 链接按钮
    查看全部
    0 采集 收起 来源:按钮

    2015-02-12

  • 使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部 在Bootstrap V2.x版本中还提供了一个行内提示信息,其使用了类名“help-inline”。一般让提示信息显示在控件的后面,也就是同一水平显示。如果你想在BootstrapV3.x版本也有这样的效果,你可以添加这段代码: .help-inline{ display:inline-block; padding-left:5px; color: #737373; }
    查看全部
    0 采集 收起 来源:表单提示信息

    2018-03-22

举报

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

微信扫码,参与3人拼团

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

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