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

玩转Bootstrap(基础)

  • 下拉菜单(对齐方式) 实现右对齐方法: Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名
    查看全部
  • 给每个组添加一个头部(标题) <li role="presentation" class="dropdown-header">第二部分菜单头部</li>
    查看全部
  • 在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。对应的样式代码: /*源码bootstrap.css文件第3034行~第3039行*/ .dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; }
    查看全部
  • 使用方法: 在使用Bootstrap框架中的下拉菜单组件时,其结构运用的正确与否非常的重要,如果结构和类名未使用正确,直接影响组件是否能正常运用。我们来简单的看看: 1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素,示例中为: <div class="dropdown"></div> 2、使用了一个<button>按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致,此示例为: data-toggle="dropdown" 3、下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”,此示例为: <ul class="dropdown-menu">
    查看全部
  • 特别声明:因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。
    查看全部
  • 列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。 通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。
    查看全部
    0 采集 收起 来源:列排序

    2017-09-11

  • 不过有一个细节需要注意,使用”col-md-offset-*”对列进行向右偏移时,要保证列与偏移列的总数不超过12,不然会致列断行显示,
    查看全部
    0 采集 收起 来源:列偏移

    2017-09-11

  • 使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。
    查看全部
    0 采集 收起 来源:列偏移

    2017-09-11

  • 在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。如: <div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"></div>
    查看全部
    0 采集 收起 来源:工作原理

    2018-03-22

  • 数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。如: <div class="container"> <div class="row"></div> </div>
    查看全部
    0 采集 收起 来源:工作原理

    2018-03-22

  • http://getbootstrap.com/components/#glyphicons 所有图标的名称
    查看全部
    0 采集 收起 来源:图标(二)

    2017-09-11

  • 所有icon都是以”glyphicon-”前缀的类名开始,然后后缀表示图标的名称。
    查看全部
    0 采集 收起 来源:图标(二)

    2017-09-11

  • 在Bootstrap框架中也为大家提供了近200个不同的icon图片,而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。
    查看全部
    0 采集 收起 来源:图标(一)

    2017-09-11

  • 1、img-responsive:响应式图片,主要针对于响应式设计 2、img-rounded:圆角图片 3、img-circle:圆形图片 4、img-thumbnail:缩略图片
    查看全部
    0 采集 收起 来源:图像

    2017-09-11

  • <button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button> <button class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
    查看全部

举报

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

微信扫码,参与3人拼团

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

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