任务没完成,继续来!因为刚才网不好,我辛辛苦苦打了洋洋洒洒一大堆都没了!
我们今天主要是说一个简单的由Bootstrap和HTML5结合而成的小案例:
首先:由标题可得知,这是移动端,所以需要这样一串代码:
<meta name="viewport" content="width=device-width,initial-scale=1"/>
然后说Bootstrap拟态框,就还要有这样的插件:
<link type ="text/css" href="../dist/css/bootstrap.min.css" rel="stylesheet">
<script src="../dist/js/bootstrap.js"></script>
然后,有点基础的都知道bootstrap,一定要和jquery一起使用,所以还要有jquery类库;
而且一定要放在bootstrap上边哦!各位亲们!
<script src="../jquery-3.1.1.min.js"></script>
先来看一眼效果:有点丑!不要建议,因为是PC端敲得!我使用浏览器WEB响应格式看的效果,见谅,见谅!
下面再来看一眼,拟态框的效果:
效果就是这样!
插件都准备好了,咱们来敲代码吧!
先是CSS的:在这里小提示一下,我用的是谷歌浏览器,CSS3的样式有些低版本的浏览器是不兼容的,所以就比较麻烦!更过几天我在更有一篇关于兼容问题的!
<style>
body{
margin: 0 auto;
padding:;
}
nav{
width: 100%;
height: 35px;
}
article{
width: 100%;
background-color: #1983D1;
}
.div2{
width: 100%;
height: 30px;
line-height: 30px;
background-color: #1983D1;
}
.div2>input{
width: 78%;
height: 25px;
border:;
background-color: #2F8DD5;
/*border: 1px solid #2F8DD5;*/
border-radius: 5px;
margin-left: 1vw;;
}
/*改变输入框 提示字体颜色*/
input::placeholder{
color: #8DC0E4;
}
.div2>button{
width: 9%;
height: 25px;
background-color: #1983D1;
border:;
font-size: 3vw;
color: white;
}
.section1>ul{
list-style: none;
display: flex;
justify-content:space-around;
align-items:center;
width: 100%;
height: 10vw;
margin-left: -30px;
}
.section1>ul>li{
width: 24%;
color: white;
font-size: 2.5vw;
text-align: center;
margin-top: 2px;
}
.section2{
background-color: white;
width: 100%;
} .section2>ul{ list-style: none;
display: flex;
justify-content:space-around;
align-items:center;
width: 100%;
height: 6rem;
margin-left: -30px;
}
.section2>ul>li{
width: 24%;
/*color: white;*/
font-size: 2vw;
text-align: center;
margin-top: 2px;
}
.section2>ul>li>span{
font-size: 2.5rem;
}
.section3{
width: 100%;
height: 90px;
line-height: 90px;
}
.section3 img{
width: 20%;
height: 90px;
margin-top: -10px;
margin-left: 2vw;
border-radius: 15px;
}
.section4{
margin-top: -4vw;
width: 100%;
height: 49vw;
}
.section4>img{
width: 100%;
height: 49vw;
}
footer>ul{
width: 100%;
height: 50px;
/*line-height: 98px;*/
list-style: none;
display: flex;
justify-content: space-between;
margin-left: -1.5vw;
}
footer>ul>li{
width: 24%;
height: 48px;
font-size: 3vw;
text-align: center;
color: #A9A9A9;
margin-top: 3vw;
}
</style>
CSS好了.
咱们下面在敲一下HTML:
<body>
<nav>
<img src="1.png" style="width: 100%;height: 35px;" />
</nav>
<div class="div1"></div>
<div class="div2">
<input type="search" placeholder=" 蚂蚁花呗" />
<button><span class="icon icon-user-tie"></span></button>
<button data-toggle="modal" data-target="#kuang" data-backdrop="true"><span class="icon icon-plus"></span></button>
</div>
<!--模态框-->
<div class="modal fade modal-sm" id="kuang" style="width: 30%; margin-left: 65%;">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!--体-->
<div class="modal-body">
<ul style="list-style: none; color:#6B6B6B;font-size: 2vw;">
<li><span class="icon icon-bubbles4" style="margin-left: -3vw;"></span> 发起群聊</li>
<li><span class="icon icon-user-plus" style="margin-left: -3vw;"></span> 添加朋友</li>
<li><span class="icon icon-qrcode" style="margin-left: -3vw;"></span> 扫 一 扫</li>
<li><span class="icon icon-coin-euro" style="margin-left: -3vw;"></span> 我要收款</li>
</ul>
</div>
</div>
</div>
</div>
<article>
<section class="section1">
<ul>
<li>
<span class="glyphicon glyphicon-qrcode"></span>
<div>扫一扫</div>
</li>
<li>
<span class="glyphicon glyphicon-usd"></span>
<div>付款</div>
</li>
<li>
<span class="glyphicon glyphicon-gbp"></span>
<div>收钱</div>
</li>
<li>
<span class="n glyphicon glyphicon-credit-card"></span>
<div>卡包</div>
</li>
</ul>
</section> <section class="section2">
<ul>
<li>
<span class="icon icon-coin-yen" style="color: #EE4A02;"></span>
<div>转账</div>
</li>
<li>
<span class="icon icon-credit-card" style="color: #EE4A02;"></span>
<div>信用卡还贷</div>
</li>
<li>
<span class="icon icon-mobile" style="color: red;"></span>
<div>充值中心</div>
</li>
<li>
<span class="icon icon-gift" style="color: red;"></span>
<div>红包</div>
</li>
</ul>
<ul>
<li>
<span class="icon icon-location" style="color: red;"></span>
<div>地图</div>
</li>
<li>
<span class="icon icon-database" style="color: orange;"></span>
<div>理财产品</div>
</li>
<li>
<span class="icon icon-connection" style="background-color: #1983D1;color: white;"></span>
<div>免费无线</div>
</li>
<li>
<span class="icon icon-warning" style="color: orange;"></span>
<div>安全须知</div>
</li>
</ul>
</section>
</article>
<hr style="background-color: #C3C3C3;width: 100%; height: 10px;" /> <section class="section3">
<img src="2.png" class="img-responsive" />
<span class="icon icon-camera pull-right" style="margin-top: -11.5vw;font-size: 5vw;margin-right: 2vw;color:#C3C3C3;"></span>
</section>
<hr style="background-color: #C3C3C3;width: 100%; height: 10px;" />
<section class="section4">
<img src="3.png" class="img-responsive" />
</section>
<footer>
<ul>
<li style="color: #1983D1;">
<span class="icon icon-svg"></span>
<div>支付宝</div>
</li>
<li>
<span class="icon icon-users"></span>
<div>朋友</div>
</li>
<li>
<span class="icon icon-hipster"></span>
<div>口碑</div>
</li>
<li>
<span class="icon icon-coin-dollar"></span>
<div>我的</div>
</li>
</ul>
</footer> <script src="../jquery-3.1.1.min.js"></script>
<script src="../dist/js/bootstrap.js"></script>
</body>
HTML就是这样!
我这里面还有一个响应布局的代码!是把rem全都转化成px的:
<script>
(function(doc) {
function changeSize() {
var size = doc.documentElement.clientWidth / 320 * 10;
doc.querySelector('html').style.fontSize = size + 'px';
}
window.onresize = changeSize;
changeSize();
})(document)
</script>
好勒!这就是Bootstrap拟态框结合的支付宝首页!
有什么不明白的,欢迎评论里提问哦!我看到会一一解答的!