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

玩转Bootstrap(基础)

  • LESS(或Sass)是css预处理语言 可以看作编译的中间语言

    查看全部
    0 采集 收起 来源:实现原理

    2020-02-08

  • 如果想让一个段落p突出显示,可以通过添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。

    查看全部
    0 采集 收起 来源:强调内容

    2020-02-02

  •  如果要使用Bootstrap的js插件,必须先调入jQuery


    查看全部
    0 采集 收起 来源:基本的HTML模板

    2020-01-31

    • .text-muted:提示,使用浅灰色(#999)

    • .text-primary:主要,使用蓝色(#428bca)

    • .text-success:成功,使用浅绿色(#3c763d)

    • .text-info:通知信息,使用浅蓝色(#31708f)

    • .text-warning:警告,使用黄色(#8a6d3b)

    • .text-danger:危险,使用褐色(#a94442)


    查看全部
    0 采集 收起 来源:强调相关的类

    2020-01-29

  • 自适应导航指的是导航占据容器全部宽度,而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用

    查看全部
  • 在实际运用当中,除了水平导航之外,还有垂直导航,就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked

    查看全部
  • 前面看到的示例,按钮组都是水平显示的。但在实际运用当中,总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可

    查看全部
  • 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。不过在我们的教程中,我们统一调用压缩好的“bootstrap.min.js”

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

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

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

    2020-01-07

  • 有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。

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

    2020-01-07

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

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

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

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


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

    2020-01-06

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

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

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


    查看全部
  • <button class="btn" type="button">基础按钮.btn</button>
    <button class="btn btn-default" type="button">默认按钮.btn-default</button>
    <button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
    <button class="btn btn-success" type="button">成功按钮.btn-success</button>
    <button class="btn btn-info" type="button">信息按钮.btn-info</button>
    <button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
    <button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
    <button class="btn btn-link" type="button">链接按钮.btn-link</button>


    查看全部
    0 采集 收起 来源:定制风格

    2020-01-06

  • 要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。

    查看全部
    0 采集 收起 来源:多标签支持

    2020-01-06

  • 在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果。
    1、.has-warning:警告状态(黄色)
    2、.has-error:错误状态(红色)
    3、.has-success:成功状态(绿色)

    查看全部

举报

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

微信扫码,参与3人拼团

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

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