Bootstrap项目之微金所

微金所项目实战

搭建Bootstrap页面骨架及项目目录结构

├─ /weijinsuo/ ··················· 项目所在目录
└─┬─ /css/ ······················· 我们自己的CSS文件
  ├─ /font/ ······················ 使用到的字体文件
  ├─ /img/ ······················· 使用到的图片文件
  ├─ /js/ ························ 自己写的JS脚步
  ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】
  ├─ /favicon.ico ················ 站点图标
  └─ /index.html ················· 入口文件

在我们默认的样式表中将默认字体设置为：

body{
  font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
}

HTML5文档结构

Viewport设置

meta:vp

浏览器兼容模式

meta:compat

favicon.ico

完成页面空结构

约定编码规范

构建顶部通栏

container类

• 用于定义一个固定宽度且居中的版心

字体图标

@font-face {
  font-family: 'itcast';
  src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'), url('../font/MiFie-Web-Font.svg') format('svg'), url('../font/MiFie-Web-Font.ttf') format('truetype'), url('../font/MiFie-Web-Font.woff') format('woff');
}

[class^="icon-"],
[class*=" icon-"] {
  font-family: itcast;
}

格式

• eot : embedded-opentype
• svg : svg
• ttf : truetype
• woff : woff

栅格系统

row类

col-**-*类

按钮样式生成

• http://blog.koalite.com/bbg/

小屏幕隐藏

导航通栏

Bootstrap扩展

品牌logo

菜单行高调整

轮播图

Bootstrap JS插件使用

background使用

background-size

• length
• percentage
• cover
• contain

图片响应式

• 目的
• 实现方式

window resize事件

网站特性

网格系统

媒体对象样式

响应式辅助类型

- hidden-xx

预约投标

pull-left

pull-right

投资产品

Tab选项卡

网格系统

::before

::after

tooltip插件

新闻资讯

Tab选项卡

响应式偏移

合作伙伴

相邻兄弟选择器

登录对话框

模态框

表单样式

导航吸顶

affix组件

深度自定义

http://v3.bootcss.com/customize

通过 Less 文件修改