20161018复习笔记

Posted 2020-08-15

 

bootstrap组件

缩略图

media-list>>media>>row>>分隔板块>>在此期间图片要记得写class为img-responsive还有其他的别的属性如media-body等等
列表组

 list-group>>list-group-item/bage

面板

panel>>panel-heading/panel-body/panel-footer

视频引进

在这里有视频格式的不同但写法是相同的

<div class="embed-responsive embed-responsive-16by9(视频比例)" style="...">   
  <iframe class="embed-responsive-item" src="..."></iframe>
 </div>

transition
这里是利用原有框架将transition和胶囊式按钮结合，再利用JS写出小球的运动轨迹来出现效果的
再写的过程中有一个漏洞要注意，要给要变化的模块附一个ID
eg:如下的写法将class的位置当做位置来用，但class移出之后再写别的的话没有一个ID你再写就找不到位置了，这样的话虽然不报错但是其他的效果不实现
因此最好在class位置给一个ID以便用来寻找位置

$(‘.nav-pills  li:first‘).click(function(){   
  $(‘.qiu‘).removeClass().addClass(‘left‘)
 })

modal>>modal-dialog>>modal-header/modal-body/modal-footer

再利用与js的结合和modal的属性来写提示框
eg:
有些值是默认的，将其改变就可以改变提示框的其他设置

show:false(显示)keyboard:false(键盘ESC)remote:true  backdrop:‘static‘（点其他空白区域）

另外补充：对于提示框右上角的叉号写法应写在最上面以防止位置出现有误。