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

来源：互联网发布：汉王ocr扫描软件编辑：程序博客网时间：2024/05/22 00:11

引入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>

0 0