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

玩转Bootstrap(基础)

  • 在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单,
    查看全部
  • 为导航条添加标题 其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来实现, div class="navbar-header">   <a href="##" class="navbar-brand">慕课网</a>  </div>
    查看全部
  • 制作一个基础导航条需要 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”
    查看全部
    0 采集 收起 来源:基础导航条

    2018-03-22

  • 面包屑(Breadcrumb)一般用于导航,主要是起的作用是告诉用户现在所处页面的位置(当前位置) 加入breadcrumb类
    查看全部
    0 采集 收起 来源:面包屑式导航

    2015-02-15

  • nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。
    查看全部
  • 作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名 添加分割线 <li class="nav-divider"></li> 或许你会问,如果我在”nav-tabs”上添加“nav-stacked”是不是也能实现垂直的标签选项导航呢?答案是:在bootstrap V2.x版本可以,但在Bootstrap V3.x版本将这个效果取消了
    查看全部
  • 胶囊形(pills)导航 通过加上类名nav-pills”即可:
    查看全部
  • 标签形导航是通过“nav-tabs”样式来实现 默认选中选项卡只需要在其标签上添加类名“class="active"”即可 有的选项卡还带有禁用状态,实现这样的效果,只需要在标签项上添加“class="disabled"”即可
    查看全部
  • 默认的“.nav”样式不提供默认的导航样式
    查看全部
  • Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”、“nav-pills”之类
    查看全部
  • 使用方法正如前面所示,只需要在“btn-group”上添加这个类名(当然,如果是普通向上弹出下拉菜单,你只需要在“dropdown”类名基础上追加“dropup”类名即可)
    查看全部
  • 按钮的向下三角形,我们是通过在<button>标签中添加一个“<span>”标签元素,并且命名为“caret” 我们的三角方向需要朝上显示,实现方法:需要在“.btn-group”类上追加“dropup”类名(这也是做向上弹起下拉菜单要用的类名)。
    查看全部
  • ?? 和普通下拉菜单实现的区别
    查看全部
    0 采集 收起 来源:按钮下拉菜单

    2015-02-15

  • 按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。 按钮下拉菜单其实就是普通的下拉菜单,只不过把“<a>”标签元素换成了“<button>”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”
    查看全部
    0 采集 收起 来源:按钮下拉菜单

    2018-03-22

  • 等分按钮也常被称为是自适应分组按钮,其实现方法也非常的简单,只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名 特别声明:在制作等分按钮组时,请尽量使用<a>标签元素来制作按钮,因为使用<button>标签元素时,使用display:table在部分浏览器下支持并不友好。
    查看全部

举报

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

微信扫码,参与3人拼团

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

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