• boostrap两个demo中涉及的知识点


    第一个demo涉及知识点:

    导航

    默认样式就是navbar-default  

    navbar-fixed-top是说将导航固定在顶部

    class=img-responsive图片可以自行缩放

    placeholder提示语

    去边框border:none;

    去圆角border-radius:0;

    给文本(textarea)区域定制自适应高度----heightauto

    注意:要想显示文本内容的话,中间不能有空格

    #contact input[type=”submit”]的意思是---选择input中,属性为submit的的

    淡入淡出的效果3transition:all 0.3s;(可以给按钮设置)

    使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

    demo的时候基本的框架

    <header></header>

    <section></section>

    <footer></footer>

     表示空格的字符:

    例:

    满意的效果插件1.jquery.singlePageNav.min.js

    使用方法:

    底部引入插件

    这个样子的效果是会慢慢转到另一页,有一个动画效果

    导航栏自身有高度,单纯这样的话内容显示会有所偏移

    所以需要加个偏移的属性,设置值为导航栏的高度

    然后有一个问题,当小屏幕的时候,点击跳转页面后导航栏没有隐藏,为了提高用户

    体验,需要实现一功能---点击跳转后,导航栏下拉菜单关闭

    2.wow.min.js

    3.animate.css

    上面这样写

    下面这样写

    引入插件

    23这两个插件要配合使用,对内容的美化

     

    wow就是直接写下来,animate是要写要执行动画的具体方法

     网站中有很多这样的方法

    时间上,重复次数:

    使用方法:例:

    要先在js中写new WOW().init();

    然后找到我们想要添加效果的盒子

    在盒子里面添加属性

    后面两个属性表示执行几秒,延迟几秒

     

    这是下面一个板块,意思是偏移上面板块多少后开始执行这个方法(ps:方法前面必须要加wow

    也可以单独执行每个小块的方法,也可以添加时间

    怎样实现页面跳转:

    第二个demo涉及知识点:

    navbar-right就可以将导航中的元素移向右边

    导航条的属性一般写法:

    添加图标的方法:

    在需要的地方写一个span标签,然后class=我们所需要的那个图标的名字

    复制的快捷键是ctrl+D(想要复制哪一行,就把鼠标放在哪一行的后边)

    为关闭按钮添加 data-dismiss=”alert” 属性就可以使其自动为警告框赋予关闭功能,关闭警告框也就是将其从DOM中删除

    为了让警告框表现出动画效果,请确保为其添加了 .fade .in

    制作图表统计图

    找到chart.js

    复制代码,保存到本地

    使用方法:

    2”、“4”……改成周一周二的形式

    出现了乱码的情况

    解决方法:

    全选,Ctrl+c复制一下

    然后点击一下这里,改为utf-8

    然后全选,Ctrl+v一下

    保存刷新显示就正常了

    div后面加一个well就能设置成背景

    可以下载,两种方法:

    一个是网址复制,然后放到引用的上面的css

    还有就是复制源码,右键另存为,放到css中,再引用

     

  • 相关阅读:
    打造颠覆你想象中的高性能,轻量级的webform框架---js直接调后台的封装(第三天)
    打造颠覆你想象中的高性能,轻量级的webform框架---js直接调后台(第二天)
    打造颠覆你想象中的高性能,轻量级的webform框架-----如何替换webform的垃圾控件(第一天)
    数据设计总结
    经典HTML5小游戏 支持各种浏览器 (围住神经猫)
    jquery 调用wcf 的SOA架构,将三层架构运用到SOA的架构中来(第四天)
    jquery 直接调用 wcf,面向服务的SOA架构 ( 第三天)
    jquery 直接调用 wcf,面向服务的SOA架构 ( 第二天)
    常见面试之机器学习算法思想简单梳理
    2014-03-29.阿里实习生招聘笔试题目
  • 原文地址:https://www.cnblogs.com/mmit/p/11387503.html
Copyright © 2020-2023  润新知