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

玩转Bootstrap(基础)

  • Bootstrap框架中下拉菜单默认是左对齐,若要下拉菜单相较于父容器右对齐,可以在“dropdown-menu"上添加一个“pull-right”或者“dropdown-menu-right”类名。

    eg:

     <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
       …
      </ul>

    “pull-right”类可以用“dropdown-menu-right”代替,两个类的作用是一样的。

    查看全部
  • 添加“divider”可以将下拉菜单分组,为了让这个分组更明显,还可以给每个组添加一个头部(标题)。

    eg:

    <li role="presentation" class="dropdown-header">
        第一部分菜单头部
    </li>


    查看全部
  • 在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。

    查看全部
  • ,默认情况,“div.dropdown”没有类名“open”,当用户第一次点击时,“div.dropdown”会添加类名“open”;当用户再次点击时,“div.dropdown”容器中的类名“open”又会被移除。

    查看全部
  • ,role是为了给一些特定的浏览工具,比如盲文浏览工具识别

    查看全部
  • 在Bootstrap框架中的下拉菜单组件是一个独立的组件.

    因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。

    1.使用一个名为“dropdown”的容器包裹了整个下拉菜单元素;

    2.使用了一个<button>按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致;

    3.下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”;

    查看全部
  • Bootstrap框架的网格系统还支持列的嵌套,可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。

    查看全部
    0 采集 收起 来源:列的嵌套

    2018-09-14

  • 列排序就是改变列的方向,改变左右浮动,设置浮动的距离。

    通过添加类名“col-md-push-*"和"col-md-pull-*"(星号代表移动的列组合数)。

    eg:col-md-4”居左,“col-md-8”居右,如果要互换位置,需要将“col-md-4”向右移动8个列的距离,也就是8个offset ,也就是在“<div class=“col-md-4”>”添加类名“col-md-push-8”,调用其样式。

    查看全部
    0 采集 收起 来源:列排序

    2018-09-14

  • 利用十二分之一(1/12)的margin-left。然后有多少个offset,就有多少个margin-left。

    有一个细节需要注意,使用”col-md-offset-*”对列进行向右偏移时,要保证列与偏移列的总数不超过12,不然会致列断行显示。

    查看全部
    0 采集 收起 来源:列偏移

    2018-09-14

  • 可以使用列偏移(offset)功能来实现两个列间隔,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。

    查看全部
    0 采集 收起 来源:列偏移

    2018-09-14

  • xs  -- extra samll    最小屏    

    sm -- small            小屏

    md -- middle         中屏

    lg   -- large            大屏

    查看全部
    0 采集 收起 来源:工作原理

    2018-09-14

    1. 、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding);

    2. 在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。

    3. 具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素.

    4. 通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响.

    5. 最外边框,带有一大片白色区域,就是相当于浏览器的可视区域。在Bootstrap框架的网格系统中带有响应式效果,其带有四种类型的浏览器(超小屏,小屏,中屏和大屏),其断点(像素的分界点)是768px、992px和1220px

    6. 2.第二个边框(1)相当于容器(.container)。针对不同的浏览器分辨率,其宽度也不一样:自动、750px、970px和1170px。

    查看全部
    0 采集 收起 来源:工作原理

    2018-09-14

  • 在Bootstrap框架中有一个fonts的目录,这个目录中提供的字体文件就是用于制作icon的字体文件。
    自定义完字体之后,需要对icon设置一个默认样式,在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现,然后通过伪元素“:before”的“content”属性调取对应的icon编码.

    查看全部
    0 采集 收起 来源:图标(一)

    2018-09-14

  • 1、img-responsive:响应式图片,主要针对于响应式设计
    2、img-rounded:圆角图片
    3、img-circle:圆形图片
    4、img-thumbnail:缩略图片

    在实际使用的时候,需要通过其他的方式来处理图片大小,可以控制图片容器的大小,不可以通过css样式直修改IMG图片的大小,这样讲究不响应了。


    查看全部
    0 采集 收起 来源:图像

    2018-09-14

  • 在Bootstrap框架中,要禁用按钮有两种实现方式:

    方法1:在标签中添加disabled属性

    方法2:在元素标签中添加类名“disabled”

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

    查看全部

举报

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

微信扫码,参与3人拼团

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

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