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

玩转Bootstrap(基础)

    1. 模态弹出窗声明,只需要自定义两个必要的属性:data-toggle="定义在Btn中"和data-target="可以接受一个需要弹出的元素的ID"

      1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器);

      2、data-target可以设置为CSS的选择符,也可以设置为模态弹出窗的ID值,一般情况设置为模态弹出窗的ID值,因为ID值是唯一的值。

    2. 触发模态弹出窗也可以是一个链接<a>元素,那么可以使用链接元素自带的href属性替代data-target属性

    查看全部
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">在IE浏览器运行最新的渲染模式

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

    2018-10-31

  • Bootstrap中所有的JS插件依赖于jQuery,因此jQuery要在BootStrap之前引用

    查看全部
  • 等分按钮也常被称为是自适应分组按钮,其实现方法也非常的简单,只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名

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

    查看全部
  • 1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素,示例中为:

    <div class="dropdown"></div>

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

    data-toggle="dropdown"

    3、下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”,此示例为:

    <ul class="dropdown-menu">


    查看全部
  • 在介绍按钮一节中,我们知道按钮是通过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>元素之外,还可以使用其他标签元素,比如<a>标签。唯一要保证的是:不管使用什么标签,“.btn-group”容器里的标签元素需要带有类名“.btn”

    查看全部
  • Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名

    查看全部
  • 5-4

    可以将下拉菜单分组,为了让这个分组更明显,还可以给每个组添加一个头部(标题),添加class=“dropdown-header”

    查看全部
  • 5-3

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

    查看全部
  • 3-24

    图像在网页制作中也是常要用到的元素,在Bootstrap框架中对于图像的样式风格提供以下几种风格:

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

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

    2018-10-29

  • 3-22

    Bootstrap框架针对按钮的状态做了一些特殊处理。在Bootstrap框架中针对按钮的状态效果主要分为两种:活动状态禁用状态

    Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)点击状态(:active)焦点状态(:focus)几种。


    查看全部
  • 3-13

    在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果。
    1、.has-warning:警告状态(黄色)
    2、.has-error:错误状态(红色)
    3、.has-success:成功状态(绿色)
    使用的时候只需要在form-group容器上对应添加状态类名。

    很多时候,在表单验证的时候,不同的状态会提供不同的 icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起

    查看全部
  • 据说对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用

    查看全部

举报

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

微信扫码,参与3人拼团

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

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