自主研发一套PHP前端开发框架(22)

最新推荐文章于 2024-05-28 21:16:13 发布

F2E前端爱好者

最新推荐文章于 2024-05-28 21:16:13 发布

阅读量872

点赞数

分类专栏： PHP javascript THINKPHP bootstrap jquery

本文链接：https://blog.csdn.net/laike1355/article/details/51179140

版权

javascript 同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

PHP

28 篇文章 0 订阅

订阅专栏

jquery

22 篇文章 0 订阅

订阅专栏

引入bootstrap作为UI框架

简单总结下栅格系统

1.把屏幕分为12列（啥叫屏幕？譬如手机、pad、普通pc电脑屏幕、超大pc电脑屏幕）
2.对应的样式分别为：col-xs-xx col-sm-xx col-md-xx col-lg-xx (xx最小为1，最大为12)
3.

方式表示：在中等屏幕设备上该div占据8列的宽度；在小屏幕上该div占用10列的宽度

bootstrap官方网址：http://www.bootcss.com/

header.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">-->
    <!--考虑到iPhone ipad 使用的retina 屏幕 dpr=2 所以 1/2=0.5 进行适配对页面进行缩放 可能导致字体变化但是使用rem 暂时不存在此问题-->
    <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="MVC/View/default/css/bootstrap.min.css">
    <script src="MVC/View/default/js/jquery-1.12.3.min.js"></script>
    <script src="MVC/View/default/js/bootstrap.min.js"></script>
    <title>LKPHP搭建的前端框架</title>
</head>
<body>

index.php

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <ul class="breadcrumb">
                <li>
                    <a href="#">主页</a> <span class="divider">/</span>
                </li>
                <li>
                    <a href="#">类目</a> <span class="divider">/</span>
                </li>
                <li class="active">
                    主题
                </li>
            </ul>
            <div class="carousel slide" id="carousel-584860">
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#carousel-584860">
                    </li>
                    <li data-slide-to="1" data-target="#carousel-584860">
                    </li>
                    <li data-slide-to="2" data-target="#carousel-584860">
                    </li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img alt="" src="img/1.jpg" />
                        <div class="carousel-caption">
                            <h4>
                                棒球
                            </h4>
                            <p>
                                棒球运动是一种以棒打球为主要特点，集体性、对抗性很强的球类运动项目，在美国、日本尤为盛行。
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <img alt="" src="img/2.jpg" />
                        <div class="carousel-caption">
                            <h4>
                                冲浪
                            </h4>
                            <p>
                                冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <img alt="" src="img/3.jpg" />
                        <div class="carousel-caption">
                            <h4>
                                自行车
                            </h4>
                            <p>
                                以自行车为工具比赛骑行速度的体育运动。1896年第一届奥林匹克运动会上被列为正式比赛项目。环法赛为最著名的世界自行车锦标赛。
                            </p>
                        </div>
                    </div>
                </div> <a data-slide="prev" href="#carousel-584860" class="left carousel-control">‹</a> <a data-slide="next" href="#carousel-584860" class="right carousel-control">›</a>
            </div>
             <a id="modal-692703" href="#modal-container-692703" role="button" class="btn" data-toggle="modal">触发遮罩窗体</a>

            <div id="modal-container-692703" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">
                        标题栏
                    </h3>
                </div>
                <div class="modal-body">
                    <p>
                        显示信息
                    </p>
                </div>
                <div class="modal-footer">
                     <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button> <button class="btn btn-primary">保存设置</button>
                </div>
            </div>
            <div class="btn-group">
                 <button class="btn" type="button"><em class="icon-align-left"></em></button> <button class="btn" type="button"><em class="icon-align-center"></em></button> <button class="btn" type="button"><em class="icon-align-right"></em></button> <button class="btn" type="button"><em class="icon-align-justify"></em></button>
            </div> <span class="badge badge-success">1</span>
        </div>
    </div>
</div>

footer.php

</body>
</html>

F2E前端爱好者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自主研发一套PHP前端开发框架(22)

引入bootstrap作为UI框架简单总结下栅格系统1.把屏幕分为12列（啥叫屏幕？譬如手机、pad、普通pc电脑屏幕、超大pc电脑屏幕） 2.对应的样式分别为：col-xs-xx col-sm-xx col-md-xx col-lg-xx (xx最小为1，最大为12) 3.方式表示：在中等屏幕设备上该div占据8列的宽度；在小屏幕上该div占用10列的宽度bootstrap官方网址：http:
复制链接

扫一扫

专栏目录