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

玩转Bootstrap(基础)

  • 菜单标签上的通知数 <span class="badge">5</span>
    查看全部
    0 采集 收起 来源:徽章

    2018-03-22

  • 在实际使用中,翻页分页导航和带页码的分页导航类似,为ul标签加入pager类: <ul class="pager"> <li><a href="#">&laquo;上一页</a></li> <li><a href="#">下一页&raquo;</a></li> </ul> 对齐样式设置: 默认情况之下,翻页分页导航是居中显示,但有的时候我们需要一个居左,一个居右。Bootstrap框架提供了两个样式:previous:让“上一步”按钮居左;next:让“下一步”按钮居右
    查看全部
  • 在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination方法;通过“pagination-lg”让分页导航变大;通过“pagination-sm”让分页导航变小:
    查看全部
  • 响应式导航条 1、保证在窄屏时需要折叠的内容必须包裹在带一个div内,并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。 2、保证在窄屏时要显示的图标样式(固定写法): <button class="navbar-toggle" type="button" data-toggle="collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 3、并为button添加data-target=".类名/#id名"
    查看全部
    0 采集 收起 来源:响应式导航条

    2018-03-22

  • ☑ .navbar-fixed-top:导航条固定在浏览器窗口顶部 ☑ .navbar-fixed-bottom:导航条固定在浏览器窗口底部
    查看全部
    0 采集 收起 来源:固定导航条

    2014-12-26

  • 常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来实现
    查看全部
  • 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”
    查看全部
    0 采集 收起 来源:基础导航条

    2018-03-22

  • 把当初制作下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级。
    查看全部
  • “.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题,如果通过类名“.disable”来禁用按钮,其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。
    查看全部
  • 使用方法: 使用方法,其实也没什么太多可说的,你可以像标签一样,使用span标签来制作,然后为他加入badge类: <a href="#">Inbox <span class="badge">42</span></a>
    查看全部
    0 采集 收起 来源:徽章

    2018-03-22

  • 为ul标签加入pager类: <ul class="pager"> <li><a href="#">&laquo;上一页</a></li> <li><a href="#">下一页&raquo;</a></li> </ul>
    查看全部
  • 在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination方法:
    查看全部
  • 图像 图像在网页制作中也是常要用到的元素,在Bootstrap框架中对于图像的样式风格提供以下几种风格: 1、img-responsive:响应式图片,主要针对于响应式设计 2、img-rounded:圆角图片 3、img-circle:圆形图片 4、img-thumbnail:缩略图片
    查看全部
    0 采集 收起 来源:图像

    2014-12-24

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

    2018-03-22

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

举报

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

微信扫码,参与3人拼团

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

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