Bootstrap拟态框+支付宝首页

职分没做到,继续来!因为刚才网不佳,作者劳累打了许多洒洒一大堆都没了!

上面再来看一眼,拟态框的效果:

图片 1

作用就是这般!

插件都准备好了,我们来敲代码吧!

接下来说Bootstrap拟态框,就还要有如此的插件:

    <link type =”text/css” href=”../dist/css/bootstrap.min.css”
rel=”stylesheet”>

  <script src=”../dist/js/bootstrap.js”></script>

第贰:由标题可查出,那是移动端,所以须求那样一串代码:

<meta
name=”viewport” content=”width=device-width,initial-scale=1″/>

先是CSS的:在那里小提醒一下,作者用的是谷歌浏览器,CSS3的体制有个别低版本的浏览器是不合营的,所以就比较辛劳!更过几天自身在更有一篇有关包容难点的!

  1 <style>
  2         body{
  3             margin: 0 auto;
  4             padding: 0;
  5         }
  6             nav{
  7                 width: 100%;
  8                 height: 35px;
  9             }
 10             article{
 11                 width: 100%;
 12                 background-color: #1983D1;
 13             }
 14             .div2{
 15                 width: 100%;
 16                 height: 30px;
 17                 line-height: 30px;
 18                 background-color: #1983D1;
 19             }
 20             .div2>input{
 21                 width: 78%;
 22                 height: 25px;
 23                 border: 0;
 24                 background-color: #2F8DD5;
 25                 /*border: 1px solid #2F8DD5;*/
 26                 border-radius: 5px;
 27                 margin-left: 1vw;;
 28             }
 29             /*改变输入框   提示字体颜色*/
 30             input::placeholder{
 31                 color: #8DC0E4;
 32             }
 33             .div2>button{
 34                 width: 9%;
 35                 height: 25px;
 36                 background-color: #1983D1;
 37                 border: 0;
 38                 font-size: 3vw;
 39                 color: white;
 40             }
 41             .section1>ul{
 42                 list-style: none;
 43                 display: flex;
 44                 justify-content:space-around;
 45                 align-items:center;
 46                 width: 100%;
 47                 height: 10vw;
 48                 margin-left: -30px;
 49             }
 50             .section1>ul>li{
 51                 width: 24%;
 52                     color: white;
 53                 font-size: 2.5vw;
 54                 text-align: center;
 55                 margin-top: 2px;
 56             }
 57             .section2{
 58                 background-color: white;
 59                 width: 100%;
 60             }
 61             
 62             .section2>ul{
 63                 
 64                 list-style: none;
 65                         display: flex;
 66                 justify-content:space-around;
 67                 align-items:center;
 68                 width: 100%;
 69                 height: 6rem;
 70                 margin-left: -30px;
 71             }
 72             .section2>ul>li{
 73                 width: 24%;
 74                     /*color: white;*/
 75                 font-size: 2vw;
 76                 text-align: center;
 77                   margin-top: 2px;
 78             }
 79             .section2>ul>li>span{
 80                 font-size: 2.5rem;
 81             }
 82             .section3{
 83                 width: 100%;
 84                 height: 90px;
 85                 line-height: 90px;
 86             }
 87             .section3 img{
 88                 width: 20%;
 89                 height: 90px;
 90                 margin-top: -10px;
 91                 margin-left: 2vw;
 92                 border-radius: 15px;
 93             }
 94             .section4{
 95                 margin-top: -4vw;
 96                 width: 100%;
 97                 height: 49vw;
 98             }
 99             .section4>img{
100                 width: 100%;
101                 height: 49vw;
102             }
103             footer>ul{
104                 width: 100%;
105                 height: 50px;
106                 /*line-height: 98px;*/
107                 list-style: none;
108                 display: flex;
109                 justify-content: space-between;
110                 margin-left: -1.5vw;
111             }
112             footer>ul>li{
113                 width: 24%;
114                 height: 48px;
115                 font-size: 3vw;
116                 text-align: center;
117                 color: #A9A9A9;
118                 margin-top: 3vw;
119             }
120         </style>        

先来看一眼效果:有点丑!不要建议,因为是PC端敲得!作者使用浏览器WEB响应格式看的功用,见谅,见谅!

图片 2

CSS好了.

下一场,有点基础的都驾驭bootstrap,一定要和jquery一起行使,所以还要有jquery类库; 而且一定要放在bootstrap上面哦!各位亲们!

<script src=”../jquery-3.1.1.min.js”></script>

我们明日第②是说二个粗略的由Bootstrap和HTML5组成而成的小案例:

大家下边在敲一下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></button>
            <button data-toggle="modal" data-target="#kuang" data-backdrop="true"></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>  发起群聊</li>
                            <li>  添加朋友</li>
                            <li>  扫 一 扫</li>
                            <li>  我要收款</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <article>
            <section class="section1">
                <ul>
                    <li>

                        <div>扫一扫</div>
                    </li>
                    <li>

                        <div>付款</div>
                    </li>
                    <li>

                        <div>收钱</div>
                    </li>
                    <li>

                        <div>卡包</div>
                    </li>
                </ul>
            </section>

            <section class="section2">
                <ul>
                    <li>

                        <div>转账</div>
                    </li>
                    <li>

                        <div>信用卡还贷</div>
                    </li>
                    <li>

                        <div>充值中心</div>
                    </li>
                    <li>

                        <div>红包</div>
                    </li>
                </ul>
                <ul>
                    <li>

                        <div>地图</div>
                    </li>
                    <li>

                        <div>理财产品</div>
                    </li>
                    <li>

                        <div>免费无线</div>
                    </li>
                    <li>

                        <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" />

        </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;">

                    <div>支付宝</div>
                </li>
                <li>

                    <div>朋友</div>
                </li>
                <li>

                    <div>口碑</div>
                </li>
                <li>

                    <div>我的</div>
                </li>
            </ul>
        </footer>

        <script src="../jquery-3.1.1.min.js"></script>
        <script src="../dist/js/bootstrap.js"></script>
    </body>

  HTML就是如此!

本人那其中还有3个响应布局的代码!是把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拟态框结合的支付宝首页!

有何样不清楚的,欢迎评论里发问哦!作者来看会挨个解答的!

相关文章