导航条 媒体对象 分页 模态框 轮播图 媒体对象列表 进度条

 

导航条代码

 

      

导航条效果

  下面代码事实现在手机分辨率小于768是导航条变形式的一种 即让导航条里的导航先隐藏然后再点击右边的四个横线在显示出来的效果

  下面代码事在窗口小于768时让搜索框不见 其中myform为自己随便起的只是为了在媒体查询里面控制他的display

 下面的代码是让登陆和注册在一行并且定位在导航条上面

 

 在分辨率小于768时总的完成效果（点击右边的四个横线的按钮后让导航ul li显示出来再次点击隐藏）

 

 

效果

 

列表组

效果

 

 分页

进度条

 

模态框

用js控制米模态框触发 不用写这一行

js控制

 

要触发一下

通过点击id为modia的元素来触发模态框让模态框显示出来
$("#modia").click(function(){
  $(".modal").modal("show")
})

通过button触发

 

警告框

 

 

 

轮播图

想要改轮播下面的圆圈样式在下面class类中

 手动掌控轮播速度（此时要把data-ride="carousel" 这个类去掉）

$('.carousel').carousel({ interval: 2000 })

选项卡

改变轮播图右边的阴影把下面三个background-image去掉

 

 

 

 媒体对象列表（用于媒体文章 和评论）

 

媒体对象列表

 

 调整媒体图片的对齐方式 可以通过给media-left那个div里加上 media-middle(中间对齐)  media-bottom(底部对齐)（默认是顶部对齐）

 

转载于:https://www.cnblogs.com/yaomengli/p/6564001.html