去年参照Bootstrap文档测试尝试的微金所项目实战,搬到博客上来看看
让我累觉不爱的前端项目之一
代码之余让人有点想玩幻想魔录了
微金所项目实战
搭建Bootstrap页面骨架及项目目录结构
1 2 3 4 5 6 7 8
| ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ······················· 我们自己的CSS文件 ├─ /font/ ······················ 使用到的字体文件 ├─ /img/ ······················· 使用到的图片文件 ├─ /js/ ························ 自己写的JS脚步 ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】 ├─ /favicon.ico ················ 站点图标 └─ /index.html ················· 入口文件
|
约定编码规范
HTML约定
- 在head中引入必要的CSS文件,优先引用第三方的CSS,方便我们自己的样式覆盖
- 在body末尾引入必要的JS文件,优先引用第三方的JS,注意JS文件之间的依赖关系,比如bootstrap.js依赖jQuery,那就应该先引用jquery.js 然后引用bootstrap.js
CSS约定
- 除了公共级别样式,其余样式全部由 模块前缀
- 尽量使用 直接子代选择器, 少用间接子代 避免错杀
HTML5文档结构
1 2 3 4 5 6 7 8 9 10
| <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>页面标题</title> </head> <body> </body> </html>
|
Viewport设置
1
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
|
html中插入视口设置,可以通过emmet meta:vp 插入
浏览器兼容模式
1
| <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
html中插入兼容模式设置,可以通过emmet meta:compat 插入
favicon(站点图标)
1
| <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
|
html中插入图标链接,可以通过emmet link:favicon 插入
引入相应的第三方文件
1 2 3 4 5 6
| <link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="my.css"> ... <script src="jquery.js"></script> <script src="bootstrap.js"></script> <script src="my.js"></script>
|
在我们默认的样式表中将默认字体设置为:
1 2 3 4 5 6 7 8
| body{ font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; }
|
完成页面空结构
先划分好页面中的大容器,然后在具体看每一个容器中单独的情况
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <body> <header></header> <section></section> <section></section> <section></section> <section></section> <section></section> <section></section> <footer></footer> </body>
|
构建顶部通栏
1 2 3
| <header> <div class="topbar"></div> </header>
|
container类
1 2 3 4 5 6 7 8
| <div class="topbar"> <div class="container">
</div> </div>
|
栅格系统
- Bootstrap中定义了一套响应式的网格系统,
- 其使用方式就是将一个容器划分成12列,
- 然后通过col-xx-xx的类名控制每一列的占比
row类
- 因为每一个列默认有一个15px的左右外边距
- row类的一个作用就是通过左右-15px屏蔽掉这个边距
1 2 3
| <div class="container"> <div class="row"></div> </div>
|
col-\-*类
- col-xs-[列数]:在超小屏幕下展示几份
- col-sm-[列数]:在小屏幕下展示几份
- col-md-[列数]:在中等屏幕下展示几份
- col-lg-[列数]:在大屏幕下展示几份
- xs : 超小屏幕 手机 (<768px)
- sm : 小屏幕 平板 (≥768px)
- md : 中等屏幕 桌面显示器 (≥992px)
- lg : 大屏幕 大桌面显示器 (≥1200px)
1 2 3 4 5 6
| <div class="row"> <div class="col-md-2 text-center"></div> <div class="col-md-5 text-center"></div> <div class="col-md-2 text-center"></div> <div class="col-md-3 text-center"></div> </div>
|
此处顶部通栏已经被划分成四列
text-center的作用就是让内部内容居中显示
字体图标
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| @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; font-style: normal; }
.icon-mobilephone::before{ content: '\e908'; }
|
1 2 3 4 5 6 7 8 9
| <div class="col-md-2 text-center"> <a class="mobile-link" href="#"> <i class="icon-mobile"></i> <span>手机微金所</span> <i class="glyphicon glyphicon-chevron-down"></i> <img src="..." alt=""> </a> </div>
|
字体文件格式
- eot : embedded-opentype
- svg : svg
- ttf : truetype
- woff : woff
hover图片展示
1 2 3
| .mobile-link:hover > img { display: block; }
|
按钮样式生成
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
| .btn-itcast { color: #ffffff; background-color: #E92322; border-color: #DB3B43; }
.btn-itcast:hover, .btn-itcast:focus, .btn-itcast:active, .btn-itcast.active, .open .dropdown-toggle.btn-itcast { color: #ffffff; background-color: #E92322; border-color: #DB3B43; }
.btn-itcast:active, .btn-itcast.active, .open .dropdown-toggle.btn-itcast { background-image: none; }
.btn-itcast.disabled, .btn-itcast[disabled], fieldset[disabled] .btn-itcast, .btn-itcast.disabled:hover, .btn-itcast[disabled]:hover, fieldset[disabled] .btn-itcast:hover, .btn-itcast.disabled:focus, .btn-itcast[disabled]:focus, fieldset[disabled] .btn-itcast:focus, .btn-itcast.disabled:active, .btn-itcast[disabled]:active, fieldset[disabled] .btn-itcast:active, .btn-itcast.disabled.active, .btn-itcast[disabled].active, fieldset[disabled] .btn-itcast.active { background-color: #E92322; border-color: #DB3B43; }
.btn-itcast .badge { color: #E92322; background-color: #ffffff; }
|
小屏幕隐藏
1
| <div class="topbar hidden-xs hidden-sm"></div>
|
或者
1
| <div class="topbar visible-md visible-lg"></div>
|
- hidden-xx : 在某种屏幕下隐藏
- visible-xx : 在某种屏幕尺寸下显示
导航通栏
- 在使用了boostrap过后,大多数界面元素都是通过bootstrap提供好的界面组件修改得来
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| <nav class="navbar navbar-itcast navbar-static-top"> <div class="container"> <div class="navbar-header"> <button id="btn" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_list" aria-expanded="false"> <span class="sr-only">切换菜单</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <i class="icon-icon"></i> <i class="icon-logo"></i> </a> </div> <div id="nav_list" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">我要投资</a></li> <li><a href="#">我要借款</a></li> <li><a href="#">平台介绍</a></li> <li><a href="#">新手专区</a></li> <li><a href="#">最新动态</a></li> <li><a href="#">微论坛</a></li> </ul> <ul class="nav navbar-nav navbar-right hidden-sm"> <li><a href="#">个人中心</a></li> </ul> </div> </div> </nav>
|
Bootstrap扩展
- 通过bootstrap文档对导航条样式的设置发现,其实本身是有一个类似于主题的概念
- navbar-default:默认的外观
- navbar-inverse:暗色背景的样式
- 所以我们希望可以通过自定义一套完整的风格:
1 2 3 4
| .navbar-itcast{ ... } ...具体代码参考navbar-default实现即可
|
品牌logo
菜单行高调整
- 默认样式中菜单的行高为20px,我们可以调整为自己想要的高度
- 一般都是通过自己的样式去覆盖
轮播图
Bootstrap JS插件使用
对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中
让后作出相应的样式调整
Bootstrap中轮播图插件叫作Carousel
基本的轮播图实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
|
<div id="轮播图的ID" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators">
<li data-target="#轮播图的ID" data-slide-to="0" class="active"></li> <li data-target="#轮播图的ID" data-slide-to="1"></li> </ol>
<div class="carousel-inner" role="listbox"> <div class="item active"> <img src="example.jpg" alt="示例图片"> <div class="carousel-caption"> </div> </div> <div class="item"> </div> </div> <a class="left carousel-control" href="#轮播图的ID" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">上一张</span> </a> <a class="right carousel-control" href="#轮播图的ID" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">下一张</span> </a> </div>
|
由于轮播图片超宽造成的影响
- 美工为了在不同屏幕下更好地展示将图片两边做的非常宽,但是我们大多数情况的页面宽度都无法满足这样的图片宽度
- 而且Bootstrap的样式中默认将图片的max-width设置为100%;
- 造成界面图片缩放
- 想在一个较小屏幕下展示一个超宽的图片,并让图片居中显示
- 两种办法:
- 换用背景图的方式,background-position: center center;
- 使img元素绝对定位,left:50%,margin-left: -width/2
background使用
- 将容器的高度固定(410px)
- 将轮播图改为背景显示
- 由于可能图片的高度不一定是410px
- 所以需要设置css3中的background-size
background-size
- length
- 如 background-size: 100px 100px,将背景图固定到多大尺寸
- percentage
- 如 background-size: 90% 90%,以百分比的形式设置背景大小
- cover
- 1.背景图片等比例缩放
- 2.让背景图相对较小边放大到目标容器大小结束
- 如:一张100*200的背景图放到一个300*400的盒子中,最终背景图片的大小是300*600
- 因为背景图的较小边为100,将100放大到目标容器300的宽度,放大了3倍,最终结果300*600
- contain
- 1.背景图片等比例缩放
- 2.让背景图相对较大边放大到目标容器大小结束
- 如:一张100*200的背景图放到一个300*400的盒子中,最终背景图片的大小是200*400
- 因为背景图的较大边为200,将200放大到目标容器400的高度,放大了2倍,最终结果200*400
demo
cover
contain
图片响应式
- 目的
- 各种终端都需要正常显示图片
- 移动端应该使用更小(体积)的图片
- 实现方式
- 将元素中直接设置的图片背景删除,换成两个data-属性(如:data-img-sm=”小图路径”,data-img-lg=”大图路径”)
- 通过JS的方式获取屏幕的宽度;
- 判断屏幕宽度是否小于一定的值(如:768)
- 根据判断情况决定使用具体的大图还是小图
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| var windowWidth = $(window).width();
var isSmallScreen = windowWidth < 768;
$('#main_ad > .carousel-inner > .item').each(function(i, item) { var $item = $(item); var imgSrc = isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
$item.css('backgroundImage', 'url("' + imgSrc + '")'); });
|
window resize事件
- 由于上一步我们实现的过程是指在页面加载完成判断一次,
- 当用户手动调整页面宽度过后没有及时发生变化,
- 所以我们可以通过window的resize事件中重新完成以上操作来解决这个问题
1 2 3 4
| function 窗口变化后执行的函数名(){ } $(window).on('resize', 窗口变化后执行的函数名);
|
- 这个事件只会在窗口尺寸发生变化后执行,但是我们需要一开始时执行一次
1 2
| ... $(window).on('resize', 窗口变化后执行的函数名).trigger('resize');
|
小图片不需要使用背景的方式
- 小图如果还是使用背景的方式,当屏幕特别小时,效果很差
- 所以当使用小图时,改用img的方式
1 2 3 4 5 6
| if (isSmallScreen) { $item.html('<img src="' + imgSrc + '" alt="" />'); } else { $item.empty(); }
|
- 按照目前的情况,如果是小图展示则不需要给容器加上410px的固定高度
- 所以我们可以通过CSS媒体查询的方式解决
1 2 3 4 5 6 7 8 9 10 11 12 13
| #main_ad > .carousel-inner > .item { background-repeat: no-repeat; background-position: center center; background-size: cover; } @media (min-width: 768px) { #main_ad > .carousel-inner > .item { height: 410px; } } #main_ad > .carousel-inner > .item > img { width: 100%; }
|
网站特性
网格系统
- 该板块当屏幕为中等尺寸时分为3列,较小屏幕是分为2列
- 所以使用网格系统划分
1 2 3 4
| <div class="col-sm-6 col-md-4"> </div>
|
媒体对象样式
- 每一个小块的样式可以通过Bootstrap中的媒体对象样式实现
1 2 3 4 5 6 7 8 9 10 11
| <a href="#"> <div class="media"> <div class="media-left"> <i class="icon-uniE907"></i> </div> <div class="media-body"> <h4 class="media-heading">支付交易保障</h4> <p>银联支付全称保证支付安全</p> </div> </div> </a>
|
响应式辅助类型
- 整个板块在超小屏幕下是隐藏起来的
- 只需要给当前板块加上hidden-xs的class
预约投标
pull-left
pull-right
投资产品
Tab选项卡
选项卡功能可以通过Bootstrap中提供的相应组件实现
http://v3.bootcss.com/javascript/#tabs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <div class="container"> <ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#第一个标签的ID" aria-controls="第一个标签的ID" role="tab" data-toggle="tab">标签页1</a></li> <li role="presentation"><a href="#第二个标签的ID" aria-controls="第二个标签的ID" role="tab" data-toggle="tab">标签页2</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="第一个标签的ID"> </div> <div role="tabpanel" class="tab-pane" id="第二个标签的ID">...</div> </div> </div>
|
网格系统
::before ::after
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| .panel-czbk > .panel-heading::before, .panel-czbk > .panel-heading::after { content: ' '; width: 16px; height: 16px; border-radius: 8px; background-color: #f0f0f0; position: absolute; }
.panel-czbk > .panel-heading::before { top: -8px; left: -8px; }
.panel-czbk > .panel-heading::after { bottom: -8px; left: -8px; box-shadow: 0 2px 1px #ccc inset; }
|
- 注意,bootstrap中的tooltip插件必须通过js方式初始化
选项卡标签横向滚动
- 要给ul加一个容器,这个容器有横向滚动条
- 动态设置ul的宽度,宽度是根据内容大小决定的
width= sum (li.width)
新闻资讯
Tab选项卡
响应式偏移
合作伙伴
相邻兄弟选择器
登录对话框
模态框
表单样式
导航吸顶
affix组件
深度自定义
通过 Less 文件修改
version 4
http://www.cnblogs.com/micua/p/bootstrap-version4-alpha.html