Skip to content

201708

Jump to bottom
Yang Tao edited this page Aug 30, 2017 · 1 revision

业精于勤荒于嬉

前端路漫漫，慢慢修

2017/08/30/三

2017/08/28/周一

【前端实时可视化开发工具】

2017/08/24/周四

2017/08/23/周三

  • 前端框架、资料汇集

  • Headroom.js--- 为页面顶部多留些空间。在不需要页头时将其隐藏。

  • iCheck---增强复选框和单选按钮

  • Git - 简易指南

  • Grunt---项目构建工具

  • Gulp---用自动化构建工具增强你的工作流程！

  • Webpack---前端资源模块化管理和打包工具

  • 为方便单独导入特效文件，Bootstrap V3.2中提供了12种JavaScript插件，他们分别是：

  • 序号 插件名称 插件文件
    01 动画过渡（Transitions） transition.js
    02 模态弹窗（Modal） modal.js
    03 下拉菜单（Dropdown） dropdown.js
    04 滚动侦测（Scrollspy） scrollspy.js
    05 选项卡（Tab） tab.js
    06 提示框（Tooltips） tooltop.js
    07 弹出框（Popover） popover.js
    08 警告框（Alert） alert.js
    09 按钮（Buttons） button.js
    10 折叠/手风琴（Collapse） collapse.js
    11 图片轮播（Carousel） carousel.js
    12 自动定位浮标（Affix） affix.js

2017/08/19/周六

bootstrap

  1. 环境搭建---由于bootstrap是在jquery的基础上开发，所以需要在此之前引入jquery.js文件；

  2. 全局样式

    • 标题---h1(36px)、h2(30px)、h3(24px)、h4(18px)、h5(14px)、h6(12px)
      • h1~h6(.h1~.h6)
      • .small
    • 文本---p:font-size：14px;ling-height:20px;margin-bottom:10px;
      • 对齐：.text-left .text-center .text-right;
      • 大小写：.text-lowercase .text-uppercase .text-capitalize;
    • 表单
      • 向父 元素添加 role="form"。
      • .form-inline---它的所有元素是内联的，向左对齐的，标签是并排的。
      • .form-group---把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
      • .form-control---向所有的文本元素<input>、<textarea> 和 <select> 添加 class ="form-control"
    • 按钮.btn;

  3. Bootstrap渐进

    • Viewport----<meta name="viewport" content="width=device-width, initial-scale=1.0">

      • initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
      • user-scalable=no 可以禁用其缩放（zooming）功能
      • maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
      • <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
      • 使用Flexible实现手淘H5页面的终端适配
      • 手淘经过多年的摸索和实战，总结了一套移动端适配的方案——flexible方案。

    • 栅格布局---col-md-offset-\*(1到11)

    • 单位

      • px---是相对于屏幕分辨率的单位，无法跟随屏幕放大缩小；
      • em---会继承父级元素的字体大小；
      • rem---会继承根元素的字体大小；html {font-size: 62.5%;}

    • 字体图标---Bootstrap图标

      • <span class="glyphicon glyphicon-search"></span>
      • 其他字体图标：
      • Iconfont，阿里妈妈MUX倾力打造的矢量图标管理、交流平台，设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。
      • Font Awesome，一套绝佳的图标字体库和CSS框架。

  4. Bootstrap组件

    • 下拉菜单---<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">主题<span class="caret"></span></button>
      • .dropdown控制组建为下拉
      • .dropdown-menu-right代替.pull-right右对齐
      • .divider分割线
    • 输入框组
      • .input-group表示控件组
      • .input-group-addon可放置额外内容及图标
    • 导航
      • .nav无序列表开始
      • .nav-tabs代表可切换的导航
      • .nav-pills代表胶囊导航，可以在使用 .nav、.nav-pills 的同时使用 .nav-stacked，让胶囊垂直堆叠。
      • .nav-justified垂直导航，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 .nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。

HOME

Clone this wiki locally