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

玩转Bootstrap(基础)

  • Bootstrap框架默认给各个组件提供了基本动画的过渡效果,如果要使用,有两种方法: ☑ 调用统一编译的bootstrap.js; ☑ 调用单一的过渡动画的JavaScript插件文件transition.js(右侧第29行引入Bootstrap上对外公布的transition.js的地址)。 transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是,这些过渡动画都是采用CSS3来实现的,所以IE6-8浏览器是不具备这些过渡动画效果。 默认情况之下,Bootstrap框架中以下组件使用了过渡动画效果: ☑ 模态弹出窗(Modal)的滑动和渐变效果; ☑ 选项卡(Tab)的渐变效果; ☑ 警告框(Alert)的渐变效果; ☑ 图片轮播(Carousel)的滑动效果。 右侧举了一个“模态弹出窗(Modal)的滑动和渐变效果”源代码例子。
    查看全部
  • Bootstrap使用jquery支撑,设置了很多常见的交互插件。
    查看全部
  • 跟嵌套表格大同小异。
    查看全部
  • 作为父容器,嵌套各种元素使用是正常的。面板--面板中嵌套表格: 一般情况下可以把面板理解为一个区域,在使用面板的时候,都会在panel-body放置需要的内容,可能是图片、表格或者列表等。来看看面板中嵌套表格和列表组的一个效果。 在实际应用运中,你或许希望表格和面板边缘不需要有任何的间距。但由于panel-body设置了一个padding:15px的值,为了实现这样的效果。我们在实际使用的时候需要把table提取到panel-body外面。
    查看全部
  • 面板--彩色面板 在基础面板一节中了解到,panel样式并没有对主题进行样式设置,而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外,还包括以下几种主题样式,构成了一个彩色面板: ☑ panel-primary:重点蓝 ☑ panel-success:成功绿 ☑ panel-info:信息蓝 ☑ panel-warning:警告黄 ☑ panel-danger:危险红 使用方法就很简单了,只需要在panel的类名基础上增加自己需要的类名
    查看全部
  • 基础面板看上去太简单了,Bootstrap为了丰富面板的功能,特意为面板增加“面板头部”和“页面尾部”的效果: ☑ panel-heading:用来设置面板头部样式 ☑ panel-footer:用来设置面板尾部样式
    查看全部
  • 面板--基础面板 基础面板非常简单,就是一个div容器运用了“panel”样式,产生一个具有边框的文本显示块。由于“panel”不控制主题颜色,所以在“panel”的基础上增加一个控制颜色的主题“panel-default”,另外在里面添加了一个“div.panel-body”来放置面板主体内容
    查看全部
  • 面板常常作为一个父容器,包裹其它的相关子元素,做成一个独立功能、分类。
    查看全部
    0 采集 收起 来源:面板

    2014-11-21

  • 这些颜色状态、活动禁止、方向对齐。。。可以看成是Bootstrap组件公用的,属于另外一个修饰的维度。 列表组组件和警告组件一样,Bootstrap为不同的状态提供了不同的背景颜色和文本色,可以使用这几个类名定义不同背景色的列表项。 ☑ list-group-item-success:成功,背景色绿色 ☑ list-group-item-info:信息,背景色蓝色 ☑ list-group-item-warning:警告,背景色为黄色 ☑ list-group-item-danger:错误,背景色为红色 如果你想给列表项添加什么背景色,只需要在“list-group-item”基础上增加对应的类名
    查看全部
  • Bootstrap框架也给组合列表项提供了状态效果,特别是链接列表组。比如常见状态和禁用状态等。实现方法和前面介绍的组件类似,在列表组中只需要在对应的列表项中添加类名: ☑ active:表示当前状态 ☑ disabled:表示禁用状态
    查看全部
  • 列表组--自定义列表组 Bootstrap框加在链接列表组的基础上新增了两个样式: ☑ list-group-item-heading:用来定义列表项头部样式 ☑ list-group-item-text:用来定义列表项主要内容 这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容
    查看全部
  • 列表组带链接。
    查看全部
  • 列表组--带徽章的列表组 带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单,只需要在“list-group-item”中添加徽章组件“badge”
    查看全部
  • Bootstrap框架中的一些UI对象,实际上是用CSS修改了元素的外观乃至原本的特征属性,再进行组合而成。本质并不神秘。基础列表组,看上去就是去掉了列表符号的列表项,并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分: ☑ list-group:列表组容器,常用的是ul元素,当然也可以是ol或者div元素 ☑ list-group-item:列表项,常用的是li元素,当然也可以是div元素
    查看全部
  • 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件。
    查看全部
    0 采集 收起 来源:列表组

    2014-11-21

举报

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

微信扫码,参与3人拼团

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

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