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 文件修改
Bootstrap项目之微金所相关推荐
- 使用Bootstrap建立网站微金所——头部
1.微金所链接:http://www.weijinsuo.com/ 2.头部分为:topbar和nav上下两个部分 (1)topbar详解 topbar使用bootstrap的栅格系统 (2)nav分 ...
- 前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询...
前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"><head><meta ...
- bootstrap实战--微金所项目(导航栏)
导航栏实现 一.导航栏展示 二.导航栏实现思路 导航栏在不同的屏幕大小下呈现不同的样式,移动端下使用手风琴菜单(有现成的代码),在sm屏幕下,除了微金所图标和个人中心外,其余都不可见. 三.相关代码 ...
- bootstrap实战--微金所项目(顶部通栏)
顶部通栏实现 一.头部展示 二.头部概述 头部主要由四部分组成,由栅格系统实现 当屏幕宽度小于992px时,该部分隐藏,响应式结构 三.相关代码 html代码 <!DOCTYPE html> ...
- 移动Web开发--学习笔记三 响应式项目实战（微金所）
响应式项目实战(微金所) 响应式项目开发流程 选择一种屏幕格式进行开发 相应功能模块完成后,测试是否响应式效果 确保响应式效果满足要求 进行下一个功能模块开发 使用自定义字体图标 创建自己的字体图标h ...
- 移动端web总结（二）——微金所项目总结
移动端微金所项目知识点总结 1,媒体查询:使用媒体查询能针对不同屏幕区间设置不同的布局和样式 语法: @media screen and (max-width: 768px) and (min-wid ...
- BootStrap---day02、03微金所项目
BootStrap---day02.03微金所项目 前两天没有更新,主要是因为做项目做得没有心情来写博客了(真的很菜),今天的任务都做完了,就来写一写这几天使用BootStrap写项目的总结和心得. ...
- 传智播客 微金所项目实战
微金所项目实战(出处:传智播客) 1. 搭建Bootstrap页面骨架及项目目录结构 ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ···· ...
- 移动web微金所实战项目——导航栏
# 微金所项目实战 ## 1. 搭建Bootstrap页面骨架及项目目录结构 ``` ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ···· ...
最新文章
- 解决AndroidStudio导入项目卡在gradle加载界面
- Java高并发程序设计学习笔记（十一）：Jetty分析
- S3C2440的内存情况在NAND FLASH或者NOR FLASH启动的情况下
- 【原创】 PostgreSQL 实现MySQL 的auto_increment 字段
- boost::spirit::karma::detail::format_manip相关的测试程序
- 【JavaScript】Document对象学习
- python日历模块_Python日历模块| firstweekday（）方法与示例
- 求大素数 - 埃拉托斯特尼筛法
- IDEA使用git提交代码时，点了commit之后卡死在performing code analysis部分，或者performing code analysis结束后没有进入下一步操作。
- 树莓派（Arduino）仿真软件 —— Fritzing
- ubuntu 开启dhcp服务并配置
- faster rcnn resnet_张航、李沐等人提出ResNet最强改进版：性能提高3%，参数不增
- 2020-08-23 每日一句
- SPSS计算变量（图文+数据集）【SPSS 012期】
- Matlab 2010b再次打开安装问题
- vue实现登录验证码
- 什么是布控球，作用是什么？
- arn : 无法加载文件 C:\Users\zky\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.
- 怎么看自己电脑的是几位的操作系统的
- 工业检测产品中，用到的PPM， DPPM和DPMO的定义