大前端

前端学习之家-大前端

BootStrap学习

一 响应式布局

1 传统布局

固定布局:通过块的width宽度进行设置,取固定值(960px,1000px)

缺点:会出现页面两边留白或者水平滚动条,让用户的体验感较差

2 优化布局

浮动+百分比布局:width宽度的取值不再固定化,直接使用%进行设置

优点:可以让页面随整体宽度的变化进行进行各自组成宽度的自动改变

弹性盒布局:通过display取值flex进行设定(在外层的大盒子进行设置,一旦设置后,会自动对其中的小盒子进行弹性布局)

弹性布局属性flex的常用子属性如下:

1 flex:伸缩性,取整型数值,通常在多个小盒子中设置,值一致的话,其所占宽度一致

2 flex-direction:伸缩方向,有4个取值

row:默认取值,小盒子自动从左往右进行排列
row-reverse:小盒子从右往左进行排列
column:小盒子从上到下进行排列
column-reverse:小盒子从下往上进行排列

3 flex-wrap:伸缩换行,常规3个取值

nowrap:默认值,不换行
wrap:换行
wrap-reverse:换行显示,会颠倒行顺序

4 justify-content:主轴对齐,常规5个取值

flex-start:默认取值,左对齐
flex-end:右对齐
center:居中对齐
space-between:两端对齐,整体平均分布
space-around:环绕对齐,每个小盒子左右都右相同的间距,中间是双倍间距

3 媒体查询

终端显示设备的不同,决定了显示内容的不同(图片大小,块的位置等等...),我们需要通过媒体查询确定当前显示的设备信息,来显示操作对应的样式

媒体查询由以下3个部分组成:

1 媒体类型

设备终端的类型,通常有如下取值
all:所有设备
screen:显示器(PC端)
tv:家用电视机
...

2 媒体特性特征

媒体常用属性
width:宽度
height:高度
...

3 关键词,关键字

用来连接,关联(媒体类型和媒体特征)
and:并且,同时满足
only:唯一的,唯一性
not:取反,不包含

4 核心语法

有以下两种实现方式:

在内部样式表style标签中:
@media 媒体类型 关键字 (媒体特性){
    选择器{样式...}
}
注意:关键字和特性括号之间有空格
分两步:
先创建对应的外部样式表
再在页面中使用link标签进行设置,在media属性中设置
<link rel="stylesheet" type="text/css" href="css/style3.css" media="..."/>

5 实现案例:

浏览器页面宽度900px以上,背景色-红色

浏览器页面宽度600px-900px之间,背景色-黄色

浏览器页面宽度600px以下,背景色-蓝色

4 响应式布局优缺点

优点:

可以灵活的运行在不同的设备终端上,更少的维护成本

缺点:

兼容设备工作量大,代码繁杂,无用的媒体查询代码会影响加载时间

5 注意事项

在媒体查询中,相同的样式会覆盖

如果是按min-width进行查询,可以直接从小到大进行排列

反之如果是按max-width进行查询,可以直接从大到小进行排列

以避免样式覆盖

二 BootStrap样式

1 基本构成

概念:

来自Twitter,是一个比较常用的前端框架,由html,css,javascript等技术构成,成熟版本V3

引入:

需要在html页面中引入BootStrap的css文件和js文件(开发版+运行版[压缩版]),当然在引入js的时候,前置引入JQ的版本文件

构成:

由栅格系统、基础组件、Css组件、JS插件

2 栅格系统

定义:

通过一系列的row(行)和column(列)组成的页面,我们需要展现的内容直接放置到对应的列模块中。

通过等分12列的方式进行数据呈现(任何设备)

为了让数据呈现更加友好,会在外层设置名为container的类样式

由于终端设备的不同,BootStrap把分辨率设置为4种展现形式

1 超小屏幕(手机),类前缀col-xs,屏幕宽度<768px

2 小屏幕(平板),类前缀col-sm,屏幕宽度<992px

1 中等屏幕(常用显示器),类前缀col-md,屏幕宽度<1200px

1 大屏幕(超大显示器),类前缀col-lg,屏幕宽度>1200px

案例

<div class="row">
	<div class="col-sm-6 col-md-3 col-lg-2">1</div>
	<div class="col-sm-6 col-md-3 col-lg-2">1</div>
	<div class="col-sm-6 col-md-3 col-lg-2">1</div>
	<div class="col-sm-6 col-md-3 col-lg-2">1</div>
</div>

解析:

如果是大屏幕lg,页面行会共占据8个列

如果是中屏幕md,页面行会占据12个列(满了)

如果是小屏幕sm,页面共两行(有换行),两个sm-6占据1行,4个两行

超小屏幕xs,各自一行,共4行

3 列的相关操作

以md中屏进行解读

1 列组合,使用col-md-数,值的类样式进行控制,数值为几就合并几个列

2 列偏移,使用col-md-offset-数值,的类样式进行控制,值为几就在列前空出几个列(左margin)

3 列嵌套,在某一个列中再使用row+列的方式进行页面组合

4 列排序

使用col-md-push-数值,的类样式进行控制,向右后置数值列的位置

使用col-md-pull-数值,的类样式进行控制,向左前置数值列的位置

三 微金所综合案例

1 项目准备

创建项目WJS-你的名字,引入css,js,fonts,images文件夹内容

使用BootStrap模板页面,进行首页内容开发

2 整体构成

<!-- 头部块 -->
<header class="wjs_header"></header>
<!-- 导航条 -->
<nav class="wjs_nav"></nav>
<!-- 轮播图 -->
<div class="wjs_banner"></div>
<!-- 信息块 -->
<div class="wjs_info"></div>
<!-- 预约块 -->
<div class="wsj_reverse"></div>
<!-- 产品块 -->
<div class="wjs_product"></div>
<!-- 新闻块 -->
<div class="wjs_news"></div>
<!-- 合作伙伴 -->
<footer class="wjs_partner"></footer>

3-1 头部

我们进行2,5,2,3块的划分,对于小屏,超小屏隐藏 hidden-sm hidden-xs

1 组成

<header class="wjs_header hidden-sm hidden-xs">
    <div class="container">
        <div class="row">
            <div class="col-md-2">2</div>
            <div class="col-md-5">5</div>
            <div class="col-md-2">2</div>
            <div class="col-md-3">3</div>
         </div>
    </div>
</header>

2 内容

第一块:手机图标,文字,向下箭头图标,二维码图片
第二块:电话图标,a标签文字
第三块:两个a标签文字
第四块:两个按钮

3 图标引入

在页面中引入css文件夹下的base.css文件

使用系统提供好的图标,或者自定义的图标,在对应的位置class引入

<!--手机图标-->
<span class="wjs_icon wjs_icon_phone"></span>
<!--向下箭头图标-->
<span class="glyphicon glyphicon-menu-down"></span>

4 Css设置

创建wjs.css样式文件,在页面中link引入

头部具体样式细节如下

.wjs_header{
	/*头部整体内容居中,行高的设置*/
	height: 50px;
	line-height: 50px;
	text-align: center;
	/*下边框样式*/
	border-bottom: 1px solid lightgrey;
}
.wjs_header .row div:nth-of-type(-n+3){
	/*给头部块中row里的前3个div设置右边框样式*/
	border-right: 1px solid lightgrey;
}
.wjs_header .row .wjs_code{
	/*让头部块中第一块整体相对定位,再让二维码块进行绝对定位,二维码的位置就固定了*/
	position: relative;
	display: block;
}
.wjs_header .row .wjs_code img{
	/*图片绝对定位*/
	position: absolute;
	/*上距离*/
	top:49px;
	/*左距离*/
	left: 0px;
	border: 1px solid lightgrey;
	/*没有上边框*/
	border-top: none;
    /*隐藏*/
	display: none;
}
.wjs_header .row .wjs_code:hover img{
	/*鼠标悬停头部第一块时,显示二维码图片*/
	display: block;
}

3-2 导航条

直接从官网组件中复制导航条原生代码:

整体控件分两个部分:

1 brand品牌图标区+手风琴按钮

2 被手风琴按钮控制的导航核心显示区域(ul构成)

具体样式代码如下

.wjs_nav{
	/*去除默认的下外边距*/
	margin-bottom:0px ;
}
.wjs_nav .navbar-brand{
	height: 80px;
	/*由于brand样式有默认15的内填充,所以行高和高度差30*/
	line-height: 50px;
}
.wjs_nav .wjs_icon{
	/*导航条图标大小*/
	font-size: 40px;
}
.wjs_nav .wjs_icon_logo{
	/*logo颜色*/
	color: rgb(225,37,27);
}
.wjs_nav .wjs_icon_text{
	/*文本颜色*/
	color: rgb(51,51,51);
}
.wjs_nav .navbar-nav a{
	line-height: 50px;
	font-size: 16px;
	/*下边框,颜色透明transparent*/
	border-bottom: 3px solid transparent;
}

.wjs_nav .navbar-nav a:hover,
.wjs_nav .navbar-nav a:focus{
	/*a标签悬停,或者获取焦点时,下边框的样式*/
	border-bottom: 3px solid rgb(225,37,27);
}
.wjs_nav .navbar-toggle{
	/*总高80,手风琴按钮自身高度34;(80-34)/2*/
	margin-top: 23px;
}

3-3 轮播图

直接从官网组件中复制轮播原生代码:

在整体轮播div中:

一个ol:多个li呈现图片下方小圆点

一个图片展示div容器:多个div子标签,每个div对应一张轮播图片设置

两个a标签:图片左右两边的上下点击图片(Previous Next)

最简单实现轮播效果,在div展示容器的div子标签里img标签直接引入图片

本题使用两种大小图片进行不同屏幕的投放,所以在div中通过存储数据,使用jq代码进行动态实现:

<div class="item" 
	data-large-image="images/slide_02_2000x410.jpg" 
	data-small-image="images/slide_02_640x340.jpg">
</div>

jq实现代码(注意:页面引入需要把自定义的js文件放在jq版本文件下方)

/*获取class名为item的4个div*/
var items = $(".wjs_banner .item");
/*浏览器屏幕尺寸改变事件*/
$(window).on("resize",function(){
    /*获取浏览器尺寸*/
    var width = $(window).width();
    /*if-else判断*/
    if (width >= 768) {
        //pc端,遍历
        $(items).each(function(){
            /*每一个div*/
            var item = $(this);
            /*获取大背景图片路径*/
            var imgSrc = item.data("largeImage");
            /*填充内容*/
            $(item).html('<a href="#" class="pcImg" style="background-image: url('+imgSrc+');"></a>');
        });
    } else{
        //移动端,遍历
        $(items).each(function(){
            /*每一个div*/
            var item = $(this);
            /*获取小图片路径*/
            var imgSrc = item.data("smallImage");
            /*填充内容*/
            $(item).html('<a href="#" class="mobileImg"><img src="'+imgSrc+'"/></a>');
        });
    }
}).trigger("resize");/*trigger函数:为了程序一加载就强制执行一次*/

3-4 信息块

该块特征:

1 在xs宽度下隐藏该模块(hidden-xs)

2 在md宽度下,一行显示三个栅格(col-md-4)

3 在sm宽度下,一行显示两个栅格(col-sm-6)

页面有如下代码复制6个构成

<div class="col-sm-6 col-md-4">
    <a href="#">
        <div class="media">
            <!-- 左侧的文字或图片 -->
            <div class="media-left wjs_icon wjs_icon_E900"></div>
			<!-- 右侧文字 -->
            <div class="media-body">
               	<!-- 右侧标题文字,稍大 -->
                <h4 class="media-heading">支持交易保障</h4>
				<!-- 右侧正文,稍小一点 -->
                <p>银联支持全程保障安全支持</p>
			</div>
		</div>
	</a>
</div>

核心样式

.wjs_info{
    /*外填充*/
	padding: 30px;
}
.wjs_info .wjs_icon{
    /*字体图标大小,注意设置前置选择器*/
	font-size: 30px;
}
.wjs_info .row>div{
    /*行下的子div进行上外边距设置*/
	margin-top: 20px;
}
.wjs_info .row a:hover{
	color: rgb(225,37,27);
}

3-5 预约块

和信息块相似,是整体首页比较简单的两个模块,该块特征

1 在xs宽度下隐藏该模块(hidden-xs)

2 栅格列模式:col-sm-9,col-sm-3

3-6 产品块

该模块的实现,需要使用到 JavaScript插件 中的 标签页 组件

该组件核心由两部分构成

1 ul构成的导航tab
li的a标签href属性指向某个面板div
href="#id值"
2 div构成的面板tab
某个div的属性id="id值"

1 tab导航区

为方便tab导航标签项溢出问题,在原生ul代码外层套一个div

css样式如下:

.wjs_product{
	/*清除前后浮动信息*/
	clear: both;
	/*产品块背景色和底部是一致的*/
	background-color:rgb(238,238,238) ;
	padding: 20px;
}
.wjs_product .nav-tabs li{
	/*给li左右产生内填充*/
	padding: 0px 15px;
}
.wjs_product .nav-tabs li a{
	/*增加高度,去除边框影响,设置下边框样式*/
	line-height: 50px;
	border: none;
	border-bottom: 3px solid transparent;
}
.wjs_product .nav-tabs li a:hover{
	/*悬停显示特殊红色下边框*/
	border-bottom: 3px solid rgb(225,37,27);
}

.wjs_product .nav-tabs li.active a,
.wjs_product .nav-tabs li.active a:hover,
.wjs_product .nav-tabs li.active a:focus{
	/*被选中带active样式的a标签默认,悬停,焦点时候的样式*/
	background-color: transparent;
	border: none;
	border-bottom: 3px solid rgb(225,37,27);
}
/*tab项进行隐藏并能水平滑动*/
.wjs_product .tab_parent{
	width: 100%;
	overflow: hidden;
}

计算ul整体宽度js代码如下:

//计算ul的整体宽度
var ul = $(".wjs_product .nav-tabs");
var lis = ul.find("li");
//定义总宽度
var totals = 0;
$(lis).each(function(){
	totals += $(this).innerWidth();//内容+padding
});
ul.width(totals);

水平滑动js代码如下(注意:页面引入iscroll.js文件):

var myScroll = new IScroll('.tab_parent',{
	scrollX:true,scrollY:false
});

2 tab面板区

本题一共由7个导航tab选项+7个面板显示区构成,我们只在第一个面板里完成了效果呈现

语法架构如下

<div class="container">
	<div class="row">
		<div class="col-xs-12 col-sm-6 col-md-4">
			在不同分辨率屏幕大小下:超小屏1行一个,小屏1行两个,中屏1行3个(产品小块)
			每个小块中分左右两块
            左边为可变宽度区域
            右边定位后大小不变
		</div>
	</div>
</div>

核心样式如下

.wjs_product .wjs_proBox .wjs_pLeft>.row{
	/*左侧默认row样式左右外边距调整,默认-15px*/
	margin-left: -10px;
	margin-right: -10px;
}
.wjs_product .wjs_proBox .wjs_pLeft>.row div:nth-of-type(even){
	/*左侧嵌套列中的偶数div,文字靠右对齐*/
	text-align: right;
}
.wjs_product .wjs_proBox .wjs_pRight{
	/*盒子右侧样式*/
	height: 150px;
	width: 100px;
    /*定位*/
	position: absolute;
	right: 0px;
	top:20px;
	text-align: center;
	border-left: 1px dashed lightgrey;
	padding-top: 30px;
}
.wjs_product .wjs_proBox .wjs_pRight::after,
.wjs_product .wjs_proBox .wjs_pRight::before{
	/*定位2个和背景同色的圆,造页面特殊形状,注意宽度,高度,半径,left,top等值的关系*/
	content: "";
	width: 10px;
	height: 10px;
	background-color: rgb(238,238,238);
	position: absolute;
	border-radius: 5px;
	left: -5px;
}
.wjs_product .wjs_proBox .wjs_pRight::before{
	top: -5px;
}
.wjs_product .wjs_proBox .wjs_pRight::after{
	bottom: -5px;
}
/*高亮的盒子,active样式,注意交集选择器写法,两个选择器间没有空格*/
.wjs_product .wjs_proBox.active{
	background-color: rgb(225,37,27) ;
	color: white;
}

3-7 新闻块

该模块的实现,和产品块一样,也需要使用 JavaScript插件 中的 标签页 组件,整体结构如下

<div class="constants">
    <div class="row">
        <div class="col-md-2 col-md-offset-2">
            新闻的标题块
		</div>
        <div class="col-md-1">
            新闻tab图标(可水平,也可垂直呈现)
        </div>
        <div class="col-md-7">
            新闻面板(我们只实现第一个面板)
        </div>
   	</div>
</div>

核心样式

.wjs_news .wjs_news_title::before{
    /*新闻块左边标题下边框线条右边的小圆点*/
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 4px;
	border: 1px solid lightgrey;
	position: absolute;
	bottom: -4px;
	right: -8px;
}
.wjs_news .nav-tabs li:nth-of-type(-n+3){
	/*中间tab导航区,撑高li:最后一个li下方不撑高*/
	margin-bottom: 60px;
}

.wjs_news .wjs_newsLine{
    /*中间tab导航区,红色竖虚线*/
	width: 1px;
	height: 100%;
	border: 1px dashed rgb(225,37,27);
	position: absolute;
	left: 45px;
}
/*中屏下(小于992px)的li横向样式,媒体查询*/
@media screen and (max-width:992px) {
	.wjs_news .nav-tabs li{
		width: 25%;
		margin-top: 20px;
	}
}

3-8 底部-合作伙伴

整个底部和头部一致,设置对应分辨率下的显隐,样式hidden-xs,hidden-sm

构成:

一个h3+一个ul(9个li,核心字体图标)

样式:

.wjs_partner{
	/*整体高度,对齐,背景色的样式处理*/
	height: 185px;
	text-align: center;
	background-color: rgb(238,238,238);
    /*溢出内容自动隐藏*/
	overflow: hidden;
}
.wjs_partner li{
	/*去除li列表风格(小黑点)*/
	list-style: none;
	/*浮动,水平排列*/
	float: left;
	/*+左外边距*/
	margin-left: 25px;
}
.wjs_partner li .wjs_icon{
	/*设置字体图标的大小*/
	font-size: 80px;
}

###

发表评论:

Copyright Your WebSite.Some Rights Reserved.