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

玩转Bootstrap(基础)

  • 媒体对象--媒体对象列表

    在写结构的时候可以使用ul,并且在ul上添加类名“media-list”,而在li上使用“media”。

    查看全部
  • 媒体对象--媒体对象的嵌套

    只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”。


    查看全部
  • 在具体使用中如下所示:

    <div class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src="http://img1.sycdn.imooc.com//52e1d29d000161fe06000338-300-170.jpg" alt="...">
        </a>
        <div class="media-body">
            <div>全方位深刻详解CSS3模块知识,经典案例分析,代码同步调试,让网页穿上绚丽装备!</div>
        </div>
    </div>


    查看全部
  • 媒体对象--默认媒体对象

       媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容

        媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片

        媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容

        媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选;

    在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。


    查看全部
  • 进度条--带Label的进度条

    <div class="progress">
        <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" >20%</div>
    </div>


    查看全部
  • 进度条--层叠进度条

    <div class="progress">

    <div class="progress-bar progress-bar-success" ></div>


    查看全部
  • 进度条--动态条纹进度条

    在进度条“progress progress-striped”两个类的基础上再加入“active”类名。如下代码:

    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-success" ></div>
    </div>

    特别注意:要让条纹进度条动起来,就需要让“progress-striped”和“active”同时运用,不然条纹进度条是不具备动效效果。

    查看全部
  • 进度条


    <div class="progress">

        <div class="progress-bar progress-bar-success"></div>

    </div> 

    动态进度条

    <div class="progress progress-striped active">

        <div class="progress-bar progress-bar-success" ></div>

    </div>

    层叠进度条

     <div class="progress-bar progress-bar-success" ></div>

    查看全部
    0 采集 收起 来源:进度条

    2018-09-18

  • 警示框--警示框的链接

    Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名,通过“alert-link”样式给链接提供高亮显示。

    <div class="alert alert-success" role="alert">

        <strong>Well done!</strong> 

    You successfully read 

    <a href="#" class="alert-link">this important alert message</a>

    .

    </div>


    查看全部
  • 警示框--可关闭的警示框

    使用方法:

    只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤:

      1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。

      2、在button标签中加入class="close"类,实现警示框关闭按钮的样式。

      3、要确保关闭按钮元素上设置了自定义属性:“data-dismiss="alert"”(因为可关闭警示框需要借助于Javascript来检测该属性,从而控制警示框的关闭)。

    <div class="alert alert-success alert-dismissable" role="alert">
        <button class="close" type="button" data-dismiss="alert">&times;</button>
        恭喜您操作成功!
    </div>


    查看全部
  • 当用户操作上下文为用户提供一些有效的警示框:

     1、成功警示框:告诉用用户操作成功,是绿色;

      2、信息警示框:给用户提供提示信息,是浅蓝色;

      3、警告警示框:提示用户小心操作(提供警告)是浅黄色;

      4、错误警示框:提示用户操作错误,是浅红色。

    不同类型的警示框,主要是通过“alert-success”、“alert-info”、“alert-warning”和“alert-danger”样式来实现。


    查看全部
  • 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题、描述等信息.通过“thumbnail”样式配合bootstrap的网格系统来实现.

    使用方法:

    通过“thumbnail”样式配合bootstrap的网格系统来实现。

    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png"  alt="">
                </a>
            </div>
        …
        </div>
    </div>


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

    2018-09-18

  • 徽章效果

    徽章效果,使用“badge”样式来实现。

    使用方法,可以像标签一样,使用span标签来制作,然后为他加入badge类;同样也使用:empty伪元素,当没有内容的时候隐藏.

    注意:不过和标签组件不一样的是:在徽章组件中没有提供多种颜色风格的效果,

    查看全部
    0 采集 收起 来源:徽章

    2018-09-18

  • <h3>Example heading <span class="label label-default">New</span></h3>

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

    2018-09-18

  • 使用方法很简单,你可以在使用span这样的行内标签.

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

    2018-09-18

举报

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

微信扫码,参与3人拼团

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

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