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


     

    导航条代码

     

          

    导航条效果

      下面代码事实现在手机分辨率小于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(底部对齐)(默认是顶部对齐)

  • 相关阅读:
    用户、角色、权限管理-设计方案之权限检测
    供电绘图计算软件-新增了图库管理功能
    AutoCAD使用技巧六则
    环境影像评价系统
    AutoCAD.net: 如何实现裁剪功能Trim
    AutoCAD 命令参考手册
    arx常用的一些函数功能表
    AutoCAD.net: Curve.GetSplitCurves的用法
    AutoCAD.net:有条件选择AutoCAD实体
    电台节目管理软件
  • 原文地址:https://www.cnblogs.com/yaomengli/p/6564001.html
Copyright © 2020-2023  润新知