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

玩转Bootstrap(基础)

  • 媒体对象列表的使用方法: 针对上图的媒体对象列表效果,Bootstrap框架提供了一个列表展示的效果,在写结构的时候可以使用ul,并且在ul上添加类名“media-list”,而在li上使用“media”
    查看全部
  • 媒体对象,嵌套也行。
    查看全部
  • class="media"这些定义的类型,列表文档在哪里?
    查看全部
    0 采集 收起 来源:媒体对象

    2018-03-22

  • 进度条--带Label的进度条 上面介绍的各种进度条,都仅仅是通过颜色进度向用户传递进度值。但实际中,有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值,在Bootstrap就为大家考虑了这种使用场景。
    查看全部
  • <h4>城市</h4> <ul class="list-inline"> <li>北京</li> <li>上海</li> <li>南京</li> <li>厦门</li> </ul>
    查看全部
  • 在右侧代码编辑器写入代码使其可以实现爱好多选(踢足球、游泳、慢跑、跳舞) 实现爱好 <b>多选</b>
    查看全部
  • Bootstrap框架除了提供上述几种进度条之外,还提供了一种层叠进度条,层叠进度条,可以将不同状态的进度条放置在一起,按水平方式排列
    查看全部
  • CSS3太强大了。 进度条--动态条纹进度条 使用方法: 在进度条“progress progress-striped”两个类的基础上再加入“active”类名。
    查看全部
  • 在Bootstrap框架中除了提供了彩色进度条之外,还提供了一种条纹进度条,这种条纹进度条采用CSS3的线性渐变来实现,并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”
    查看全部
  • 进度条--彩色进度条 Bootstrap框架中的进度条和警告信息框一样,为了能给用户一个更好的体验,也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条,其主要包括以下四种: ☑ progress-bar-info:表示信息进度条,进度条颜色为蓝色 ☑ progress-bar-success:表示成功进度条,进度条颜色为绿色 ☑ progress-bar-warning:表示警告进度条,进度条颜色为黄色 ☑ progress-bar-danger:表示错误进度条,进度条颜色为红色 使用方法: 具体使用就非常简单了,只需要在基础的进度上增加对应的类名。
    查看全部
  • 进度条--基本样式 Bootstrap框架中对于进度条提供了一个基本样式,一个100%宽度的背景色,然后个高亮的色表示完成进度。其实制作这样的进度条非常容易,一般是使用两个容器,外容器具有一定的宽度,并且设置一个背景颜色,他的子元素设置一个宽度,比如完成度是30%(也就是父容器的宽度比例值),同时给其设置一个高亮的背景色。 使用方法: Bootstrap框架中也是按这样的方式实现的,他提供了两个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式,而progress-bar用于限制进度条的进度。使用方法非常的简单: <div class="progress"> <div class="progress-bar" ></div> </div>
    查看全部
  • 非常漂亮的进度条实现效果。
    查看全部
    0 采集 收起 来源:进度条

    2014-11-21

  • 警示框--警示框的链接 有时候你可能想在警示框中加入链接地址,用来告诉用户跳到某一个地方或新的页面。而这个时候你又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理,并且颜色相应加深。 实现方法: Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名,通过“alert-link”样式给链接提供高亮显示。
    查看全部
  • 警示框--可关闭的警示框 大家在平时浏览网页的时候,会发现一些警示框带有关闭按钮,用户一点击关闭按钮就能自动关闭显示的警示框(也就是让警示框隐藏不显示)。在Bootstrap框架中的警示框也具有这样的功能。 使用方法: 只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤: 1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。 2、在button标签中加入class="close"类,实现警示框关闭按钮的样式。 3、要确保关闭按钮元素上设置了自定义属性:“data-dismiss="alert"”(因为可关闭警示框需要借助于Javascript来检测该属性,从而控制警示框的关闭)。
    查看全部
  • 警示框--默认警示框 Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下,提供了四种不同的警示框效果: 1、成功警示框:告诉用用户操作成功,在“alert”样式基础上追加“alert-success”样式,具体呈现的是背景、边框和文本都是绿色; 2、信息警示框:给用户提供提示信息,在“alert”样式基础上追加“alert-info”样式,具体呈现的是背景、边框和文本都是浅蓝色; 3、警告警示框:提示用户小心操作(提供警告信息),在“alert”样式基础上追加“alert-warning”样式,具体呈现的是背景、边框、文本都是浅黄色; 4、错误警示框:提示用户操作错误,在“alert”样式基础上追加“alert-danger”样式,具体呈现的是背景、边框和文本都是浅红色。
    查看全部

举报

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

微信扫码,参与3人拼团

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

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