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

玩转Bootstrap(基础)

  • 响应式导航条 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 采集 收起 来源:固定导航条

    2015-01-27

  • 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default
    查看全部
    0 采集 收起 来源:基础导航条

    2018-03-22

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

    2015-01-27

  • 在实际运用当中,除了水平导航之外,还有垂直导航,就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可: <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="##">Home</a></li>
    查看全部
  • 我们的三角方向需要朝上显示,实现方法:需要在“.btn-group”类上追加“dropup”类名(这也是做向上弹起下拉菜单要用的类名)。
    查看全部
  • btn-group-justified 等分
    查看全部
  • 默认水平 btn-group 垂直 btn-group-vertical
    查看全部
  • css放在head中,js放在body的最下方
    查看全部
  • 下拉菜单,首先是一个btn-group,添加 dropup 为上拉菜单 button为父级菜单,添加dropdown-toggle data-toggle="dropdown", <span class="caret"></span> 为小三角图标 下拉菜单为列表,加.dropdown-menu, 下拉内容分割线class="divider" 下拉标题 class="dropdown-header" 下拉选中 class="active"
    查看全部
  • 按钮(按钮工具栏) Bootstrap框架按钮工具栏也提供了这样的制作方法,你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中 按钮组大小设置 在介绍按钮一节中,我们知道按钮是通过btn-lg、btn-sm和btn-xs三个类名来调整padding、font-size、line-height和border-radius属性值来改变按钮大小。那么按钮组的大小,我们也可以通过类似的方法: ☑ .btn-group-lg:大按钮组 ☑ .btn-group-sm:小按钮组 ☑ .btn-group-xs:超小按钮组 只需要在“.btn-group”类名上追加对应的类名,就可以得到不同大小的按钮组
    查看全部
  • 按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能。 对于结构方面,非常的简单。使用一个名为“btn-group”的容器,把多个按钮放到这个容器中。
    查看全部
  • <dl> <dt>这里有加粗</dt> <dd>这里是对上面文字的补充,没有加粗</dd> </dl>
    查看全部
  • 在Bootstrap框架中对于图像的样式风格提供以下几种风格: 1、img-responsive:响应式图片,主要针对于响应式设计 2、img-rounded:圆角图片 3、img-circle:圆形图片 4、img-thumbnail:缩略图片
    查看全部
    0 采集 收起 来源:图像

    2015-01-26

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

举报

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

微信扫码,参与3人拼团

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

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