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

玩转Bootstrap(基础)

  • 为方便单独导入特效文件,Bootstrap V3.2中提供了12种JavaScript插件,他们分别是: ☑ 动画过渡(Transitions):对应的插件文件“transition.js” ☑ 模态弹窗(Modal):对应的插件文件“modal.js” ☑ 下拉菜单(Dropdown):对应的插件文件“dropdown.js” ☑ 滚动侦测(Scrollspy):对应的插件文件“scrollspy.js” ☑ 选项卡(Tab):对应的插件文件“tab.js” ☑ 提示框(Tooltips):对应的插件文件“tooltop.js” ☑ 弹出框(Popover):对应的插件文件“popover.js” ☑ 警告框(Alert):对应的插件文件“alert.js” ☑ 按钮(Buttons):对应的插件文件“button.js” ☑ 折叠/手风琴(Collapse):对应的插件文件“collapse.js” ☑ 图片轮播Carousel:对应的插件文件“carousel.js” ☑ 自动定位浮标Affix:对应的插件文件“affix.js"
    查看全部
  • 在基础面板一节中了解到,panel样式并没有对主题进行样式设置,而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外,还包括以下几种主题样式,构成了一个彩色面板: ☑ panel-primary:重点蓝 ☑ panel-success:成功绿 ☑ panel-info:信息蓝 ☑ panel-warning:警告黄 ☑ panel-danger:危险红
    查看全部
  • 基础面板看上去太简单了,Bootstrap为了丰富面板的功能,特意为面板增加“面板头部”和“页面尾部”的效果: ☑ panel-heading:用来设置面板头部样式 ☑ panel-footer:用来设置面板尾部样式
    查看全部
  • 基础面板非常简单,就是一个div容器运用了“panel”样式,产生一个具有边框的文本显示块。由于“panel”不控制主题颜色,所以在“panel”的基础上增加一个控制颜色的主题“panel-default”,另外在里面添加了一个“div.panel-body”来放置面板主体内容:
    查看全部
  • 列表组组件和警告组件一样,Bootstrap为不同的状态提供了不同的背景颜色和文本色,可以使用这几个类名定义不同背景色的列表项。 ☑ list-group-item-success:成功,背景色绿色 ☑ list-group-item-info:信息,背景色蓝色 ☑ list-group-item-warning:警告,背景色为黄色 ☑ list-group-item-danger:错误,背景色为红色
    查看全部
  • Bootstrap框架也给组合列表项提供了状态效果,特别是链接列表组。比如常见状态和禁用状态等。实现方法和前面介绍的组件类似,在列表组中只需要在对应的列表项中添加类名: ☑ active:表示当前状态 ☑ disabled:表示禁用状态
    查看全部
  • Bootstrap框加在链接列表组的基础上新增了两个样式: ☑ list-group-item-heading:用来定义列表项头部样式 ☑ list-group-item-text:用来定义列表项主要内容 这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容
    查看全部
  • 但在Bootstrap框架中,还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换,而li.list-group-item直接用a.list-group-item来替换。这样就可以达到需要的效果:
    查看全部
  • 带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单,只需要在“list-group-item”中添加徽章组件“badge”:
    查看全部
  • 列表组--基础列表组 基础列表组,看上去就是去掉了列表符号的列表项,并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分: ☑ list-group:列表组容器,常用的是ul元素,当然也可以是ol或者div元素 ☑ list-group-item:列表项,常用的是li元素,当然也可以是div元素
    查看全部
  • 媒体对象的嵌套仅是媒体对象中一个简单应用效果之一,在很多时候,我们还会碰到一个列表,每个列表项都和媒体对象长得差不多,同样用评论系统来说事: 针对上图的媒体对象列表效果,Bootstrap框架提供了一个列表展示的效果,在写结构的时候可以使用ul,并且在ul上添加类名“media-list”,而在li上使用“media”,示例代码如下:
    查看全部
  • 媒体对象--默认媒体对象 媒体对象一般是成组出现,而一组媒体对象常常包括以下几个部分: ☑ 媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容 ☑ 媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片 ☑ 媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容 ☑ 媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选 除了上面四个部分之外,在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。
    查看全部
  • 只需要在进度条中添加你需要的值,如: <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" >20%</div> </div>
    查看全部
  • 动态进度条: 在进度条“progress progress-striped”两个类的基础上再加入“active”类名。如下代码:
    查看全部
  • 在Bootstrap框架中除了提供了彩色进度条之外,还提供了一种条纹进度条,这种条纹进度条采用CSS3的线性渐变来实现,并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”,当然,如果你要让你的进度条条纹像彩色进度一样,具有彩色效果,你只需要在进度条上增加相应的颜色类名,如前面的彩色进度条所讲。
    查看全部

举报

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

微信扫码,参与3人拼团

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

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