jquery 2023-11-10 22:00

This is an application of the

Bootstrap项目实战

demo页面：https://havenxie.github.io/webapp-wlc/

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

├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ······················· 我们自己的CSS文件 ├─ /font/ ······················ 使用到的字体文件 ├─ /img/ ······················· 使用到的图片文件 ├─ /js/ ························ 自己写的JS脚步 ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】 ├─ /favicon.ico ················ 站点图标 └─ /index.html ················· 入口文件 1.1.约定编码规范 1.1.1.HTML约定在head中引入必要的CSS文件，优先引用第三方的CSS，方便我们自己的样式覆盖在body末尾引入必要的JS文件，优先引用第三方的JS，注意JS文件之间的依赖关系，比如bootstrap.js依赖jQuery，那就应该先引用jquery.js 然后引用bootstrap.js 1.1.2.CSS约定除了公共级别样式，其余样式全部由模块前缀尽量使用直接子代选择器，少用间接子代避免错杀 1.2.HTML5文档结构

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>页面标题</title> </head> <body> </body> </html> 1.3.Viewport设置

html中插入视口设置，可以通过emmet meta:vp 插入

1.4.浏览器兼容模式

html中插入兼容模式设置，可以通过emmet meta:compat 插入

1.5.favicon（站点图标）

html中插入图标链接，可以通过emmet link:favicon 插入

1.6.引入相应的第三方文件

body{ font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; } 2.完成页面空结构

先划分好页面中的大容器，然后在具体看每一个容器中单独的情况

<body>  <header></header>   <section></section>   <section></section>   <section></section>   <section></section>   <section></section>   <section></section>   <footer></footer>  </body> 3.构建顶部通栏

<header> <div class="topbar"></div> </header> 3.1.container类用于定义一个固定宽度且居中的版心

<div class="topbar"> <div class="container">  </div> </div> 3.2.栅格系统 Bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比 3.2.1.row类因为每一个列默认有一个15px的左右外边距 row类的一个作用就是通过左右-15px屏蔽掉这个边距

<div class="container"> <div class="row"></div> </div> 3.2.2.col-**-*类 col-xs-[列数]：在超小屏幕下展示几份 col-sm-[列数]：在小屏幕下展示几份 col-md-[列数]：在中等屏幕下展示几份 col-lg-[列数]：在大屏幕下展示几份 xs : 超小屏幕手机 (<768px) sm : 小屏幕平板 (≥768px) md : 中等屏幕桌面显示器 (≥992px) lg : 大屏幕大桌面显示器 (≥1200px)

此处顶部通栏已经被划分成四列 text-center的作用就是让内部内容居中显示

3.2.字体图标

@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-"] { /*注意上面选择器中间的空格*/ /*我们使用的名为itcast的字体就是上面的@font-face的方式声明的*/ font-family: itcast; font-style: normal; } .icon-mobilephone::before{ content: '\e908'; }

<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 3.4.hover图片展示

.mobile-link:hover > img { display: block; } 3.5.按钮样式生成 http://blog.koalite.com/bbg/ 可以通过界面生成一个新的按钮样式

.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; } 3.5小屏幕隐藏

或者

<div class="topbar visible-md visible-lg"></div> hidden-xx : 在某种屏幕下隐藏 visible-xx : 在某种屏幕尺寸下显示 4.导航通栏在使用了boostrap过后，大多数界面元素都是通过bootstrap提供好的界面组件修改得来

<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> 4.1.Bootstrap扩展通过bootstrap文档对导航条样式的设置发现，其实本身是有一个类似于主题的概念 navbar-default：默认的外观 navbar-inverse：暗色背景的样式所以我们希望可以通过自定义一套完整的风格： navbar-itcast

.navbar-itcast{ ... } ...具体代码参考navbar-default实现即可 4.2.品牌logo 任然使用字体图标 4.3.菜单行高调整默认样式中菜单的行高为20px，我们可以调整为自己想要的高度一般都是通过自己的样式去覆盖 5.轮播图 5.1.Bootstrap JS插件使用

对于Bootstrap的JS插件，我们只需要将文档实例中的代码粘到我们自己的代码中让后作出相应的样式调整

5.1.1.Bootstrap中轮播图插件叫作Carousel 5.1.2.基本的轮播图实现

<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> 5.1.3.由于轮播图片超宽造成的影响美工为了在不同屏幕下更好地展示将图片两边做的非常宽，但是我们大多数情况的页面宽度都无法满足这样的图片宽度而且Bootstrap的样式中默认将图片的max-width设置为100%；造成界面图片缩放想在一个较小屏幕下展示一个超宽的图片，并让图片居中显示两种办法：换用背景图的方式，background-position: center center; 使img元素绝对定位，left:50%，margin-left: -width/2 5.2.background使用将容器的高度固定（410px）将轮播图改为背景显示由于可能图片的高度不一定是410px 所以需要设置css3中的background-size 5.2.1.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 5.3.图片响应式目的各种终端都需要正常显示图片移动端应该使用更小（体积）的图片实现方式将元素中直接设置的图片背景删除，换成两个data-属性（如：data-img-sm="小图路径"，data-img-lg="大图路径"）通过JS的方式获取屏幕的宽度；判断屏幕宽度是否小于一定的值（如：768）根据判断情况决定使用具体的大图还是小图

// 获取屏幕宽度 var windowWidth = $(window).width(); // 判断屏幕属于大还是小 var isSmallScreen = windowWidth < 768; // 根据大小为界面上的每一张轮播图设置背景 // $('#main_ad > .carousel-inner > .item') // 获取到的是一个DOM数组（多个元素） $('#main_ad > .carousel-inner > .item').each(function(i, item) { // 因为拿到是DOM对象需要转换 var $item = $(item); // var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg'); var imgSrc = isSmallScreen ? $item.data('image-xs') : $item.data('image-lg'); // 设置背景图片 $item.css('backgroundImage', 'url("' + imgSrc + '")'); }); 5.4.window resize事件由于上一步我们实现的过程是指在页面加载完成判断一次，当用户手动调整页面宽度过后没有及时发生变化，所以我们可以通过window的resize事件中重新完成以上操作来解决这个问题

function 窗口变化后执行的函数名(){ // 具体的操作 } $(window).on('resize', 窗口变化后执行的函数名); 这个事件只会在窗口尺寸发生变化后执行，但是我们需要一开始时执行一次

... $(window).on('resize', 窗口变化后执行的函数名).trigger('resize'); 5.5.小图片不需要使用背景的方式小图如果还是使用背景的方式，当屏幕特别小时，效果很差所以当使用小图时，改用img的方式

// 因为我们需要小图时尺寸等比例变化，所以小图时我们使用img方式 if (isSmallScreen) { $item.html('<img src="' + imgSrc + '" alt="" />'); } else { $item.empty(); } 按照目前的情况，如果是小图展示则不需要给容器加上410px的固定高度所以我们可以通过CSS媒体查询的方式解决

#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%; } 6.网站特性 6.1.网格系统该板块当屏幕为中等尺寸时分为3列，较小屏幕是分为2列所以使用网格系统划分

<div class="col-sm-6 col-md-4">  </div>  6.2.媒体对象样式每一个小块的样式可以通过Bootstrap中的媒体对象样式实现

<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> 6.3.响应式辅助类型整个板块在超小屏幕下是隐藏起来的只需要给当前板块加上hidden-xs的class 7.预约投标 7.1.pull-left 左边文字段落 7.2.pull-right 右边文字段落 8.投资产品 8.1.Tab选项卡

选项卡功能可以通过Bootstrap中提供的相应组件实现 http://v3.bootcss.com/javascript/#tabs

<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> 8.2.网格系统和网站特色板块的网格系统定义一样 8.3.::before ::after

.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; } 8.5.tooltip插件注意，bootstrap中的tooltip插件必须通过js方式初始化 8.6.选项卡标签横向滚动要给ul加一个容器，这个容器有横向滚动条动态设置ul的宽度，宽度是根据内容大小决定的 width= sum (li.width) 9.新闻资讯 9.1.Tab选项卡 9.2.响应式偏移 10.合作伙伴 10.1.相邻兄弟选择器 11.登录对话框 11.1模态框 11.2表单样式 12.导航吸顶 12.1.affix组件 13.深度自定义 13.1.http://v3.bootcss.com/customize 13.2.通过 Less 文件修改 14.version 4

http://www.cnblogs.com/micua/p/bootstrap-version4-alpha.html

许可

MIT © havenxie

前往下载

版权声明：

1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。
2、网站不提供资料下载，如需下载请到原作者页面进行下载。

分享到：

版权声明：

相关推荐