Bootstrap手机网站开发案例

一、总结

一句话总结：Bootstrap手机网站开发注意事项（3点）：a、引入viewpoint声明，b、通过屏幕宽动态控制元素显隐 c、图片添加自适应

1、Bootstrap手机网站开发注意事项（3点）？

a、引入手机声明

11     <meta name="viewport" content="width=device-width, initial-scale=1.0">

b、通过屏幕宽动态控制元素显隐

135 <script>

136 w=$(window).width();

137

138 if(w<700){

139     $('.bottom-right').hide();

140     $('.navbar-left').css({'text-align':'center'});

141 }

142

143 $('.panel-body img').addClass('img-responsive');

144 </script>

c、图片添加自适应

143 $('.panel-body img').addClass('img-responsive');

2、页面引用原生数据库操作方法及位置？

php放开头

  1 <?php

  2 include 'public/common/config.php';

  3 $sql="select * from message";

  4 $rst=mysql_query($sql);

  5

  6 ?>

  7 <!doctype html>

3、应用框架内元素方法，比如bootstrap中的幻灯片？

引模块加指定id进行样式微调

 21         .navbar-brand{

 22             padding:0px;

 23         }

4、模型中foreach循环拆开写？

 98         <?php

 99         while($row=mysql_fetch_assoc($rst)){

100         ?>
119         <?php

120         }

121         ?>

5、网站到数据库内容转实体方法？

110                 <?php echo htmlspecialchars_decode($row[content]) ?>

6、除uedit外另一个富文本编辑器？

kd，kindeditor，用法和ueditor很像，引文件加js

 16     <script src="public/kd/kindeditor-min.js"></script>
122 var editor;

123 KindEditor.ready(function(K) {

124     editor = K.create('#txt', {

125         resizeType : 1,

126         allowPreviewEmoticons : false,

127         allowImageUpload : false,

128         items : [

129             'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',

130             'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',

131             'insertunorderedlist', '|', 'emoticons', 'image', 'link']

132     });

133 });

7、通过header跳转方法？

12     header('location:index.php');

二、Bootstrap手机网站开发案例

1、index.php

 <?php

 include 'public/common/config.php';

 $sql="select * from message";

 $rst=mysql_query($sql);

 ?>

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

 11     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>动漫乐园</title>

     <link rel="stylesheet" href="public/bs/css/bootstrap.min.css">

     <script src="public/js/jquery.js"></script>

     <script src="public/bs/js/bootstrap.min.js"></script>

     <style>

         *{

             font-family: 微软雅黑;

             font-size:16px;

         }

 21         .navbar-brand{

             padding:0px;

         }

         .page{

             padding-top:60px;

         }

         .navbar2{

             padding-right:15px;

         }

         .panel-primary{

             margin-top:15px;

             margin-bottom:15px;

         }

     </style>

 </head>

 <body>

     <div class="container page">

         <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

             <div class="container">

                 <div class="navbar-header">

                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

                     <span class="sr-only">Toggle navigation</span>

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                   </button>

                   <a class="navbar-brand" href="index.php">

                       <img src="public/images/logo.png" alt="">

                   </a>

                 </div>

                 <!-- Collect the nav links, forms, and other content for toggling -->

                 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                   <ul class="nav navbar-nav navbar-right">

                     <li><a href="add.php">发布动漫</a></li>

                   </ul>

                 </div>

             </div>

         </nav>

         <!-- 幻灯片 -->

         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

           <!-- Indicators -->

           <ol class="carousel-indicators">

             <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

             <li data-target="#carousel-example-generic" data-slide-to="1"></li>

             <li data-target="#carousel-example-generic" data-slide-to="2"></li>

           </ol>

           <!-- Wrapper for slides -->

           <div class="carousel-inner">

             <div class="item active">

               <img src="public/images/a.jpg" alt="...">

             </div>

             <div class="item">

               <img src="public/images/b.jpg" alt="...">

             </div>

             <div class="item">

               <img src="public/images/c.jpg" alt="...">

             </div>

           </div>

           <!-- Controls -->

           <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">

             <span class="glyphicon glyphicon-chevron-left"></span>

           </a>

           <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">

             <span class="glyphicon glyphicon-chevron-right"></span>

           </a>

         </div>

         <!-- 内容部分 -->

 98         <?php

         while($row=mysql_fetch_assoc($rst)){

         ?>

         <div class="panel panel-primary">

             <div class="panel-heading">

                 <div class="panel-title">

                     <img src="public/images/head.jpg" alt="">

                     <span><?php echo $row[title]?></span>

                 </div>

             </div>

             <div class="panel-body">

                 <?php echo htmlspecialchars_decode($row[content]) ?>

             </div>

             <div class="panel-footer">

                 <span><span class='label label-primary'>发布者:</span> user1</span>

                 <span style='margin-left:10px;'><span class='label label-danger'>发布时间:</span> 2015.10.27</span>

             </div>

         </div>

119         <?php

         }

         ?>

         <!-- 底部导航条 -->

         <nav class="navbar navbar-inverse navbar2" role="navigation">

           <ul class="nav navbar-nav navbar-left">

             <li><a href="#">www.lampym.com</a></li>

           </ul>

           <ul class="nav navbar-nav navbar-right bottom-right">

             <li><a href="#">云知梦，只为有梦想的人!</a></li>

           </ul>

         </nav>

     </div>

 </body>

 <script>

 w=$(window).width();

 if(w<){

     $('.bottom-right').hide();

     $('.navbar-left').css({'text-align':'center'});

 }

 $('.panel-body img').addClass('img-responsive');

 </script>

 </html>

2、add.php

 <?php

 include 'public/common/config.php';

 $sql="select * from message";

 $rst=mysql_query($sql);

 ?>

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>index</title>

     <link rel="stylesheet" href="public/bs/css/bootstrap.min.css">

     <script src="public/js/jquery.js"></script>

     <script src="public/bs/js/bootstrap.min.js"></script>

     <script src="public/kd/kindeditor-min.js"></script>

     <style>

         *{

             font-family: 微软雅黑;

             font-size:16px;

         }

         .navbar-brand{

             padding:0px;

         }

         .page{

             padding-top:60px;

         }

         .navbar2{

             padding-right:15px;

         }

         .panel-primary{

             margin-top:15px;

             margin-bottom:15px;

         }

         .ke-container{

             width:100%!important;

         }

     </style>

 </head>

 <body>

     <div class="container page">

         <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

             <div class="container">

                 <div class="navbar-header">

                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

                     <span class="sr-only">Toggle navigation</span>

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                   </button>

                   <a class="navbar-brand" href="index.php">

                       <img src="public/images/logo.png" alt="">

                   </a>

                 </div>

                 <!-- Collect the nav links, forms, and other content for toggling -->

                 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                   <ul class="nav navbar-nav navbar-right">

                     <li><a href="add.php">发布动漫</a></li>

                   </ul>

                 </div>

             </div>

         </nav>

         <div class="panel panel-primary">

             <div class="panel-heading">

                 <div class="panel-title">

                     <img src="public/images/head.jpg" alt="">

                     <span>发布动漫</span>

                 </div>

             </div>

             <div class="panel-body">

                 <form action="insert.php" method='post'>

                     <div class="form-group">

                         <label for="">发布者:</label>

                         <input type="text" class='form-control' name='username'>

                     </div>

                     <div class="form-group">

                         <label for="">动漫名称:</label>

                         <input type="text" class='form-control' name='title'>

                     </div>

                     <div class="form-group">

                         <label for="">动漫简介:</label>

                         <textarea name="content" id="txt" cols="30" rows="10" class='form-control'></textarea>

                     </div>

                     <div class="form-group">

                         <input type="submit" value="Ok" class='btn btn-primary'>

                         <input type="reset" value="Cancel" class='btn btn-danger'>

                     </div>

                 </form>

             </div>

         </div>

         <nav class="navbar navbar-inverse navbar2" role="navigation">

           <ul class="nav navbar-nav navbar-left">

             <li><a href="#">www.lampym.com</a></li>

           </ul>

           <ul class="nav navbar-nav navbar-right bottom-right">

             <li><a href="#">云知梦，只为有梦想的人!</a></li>

           </ul>

         </nav>

     </div>

 </body>

 <script>

 w=$(window).width();

 if(w<700){

     $('.bottom-right').hide();

     $('.navbar-left').css({'text-align':'center'});

 }

 $('.panel-body img').addClass('img-responsive');

 var editor;

 KindEditor.ready(function(K) {

     editor = K.create('#txt', {

         resizeType : ,

         allowPreviewEmoticons : false,

         allowImageUpload : false,

         items : [

             'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',

             'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',

             'insertunorderedlist', '|', 'emoticons', 'image', 'link']

     });

 });

 </script>

 </html>

3、insert.php

 <?php

 include 'public/common/config.php';

 $username=$_POST['username'];

 $title=$_POST['title'];

 $content=htmlspecialchars(addslashes($_POST['content']));

 $time=time();

 $sql="insert into message(username,title,content,time) values('{$username}','{$title}','{$content}','{$time}')";

 if(mysql_query($sql)){

     header('location:index.php');

 };

 ?>
 
 
 
 
 
 

Bootstrap手机网站开发案例的更多相关文章

  1. JM-1 手机网站开发测试环境搭建

    JM-1 手机网站开发测试环境搭建 一.总结 一句话总结:WEB服务器环境可实现局域网内轻松访问.360wifi可以实现局域网. 二.微网站开发环境: 1.把微网站放到本机wamp环境下,用pc浏览器 ...

  2. HTML5移动端手机网站开发流程

    基本上开发手机网站,可大致分为两大类.一类是用框架开发手机网站.一类是自己手写手机网站. 一.框架开发手机网站 一般用现在常用的开发框架有:目前Web前端最火的框架(BootStrap).jQuery ...

  3. WEBAPP开发技巧(手机网站开发注意事项)

    以下只是我个人得总结,如果你有更好的建议,请留言,一起共勉进步!!- -! 1.要响应式开发web,也就是页面必须自适应屏幕大小,可以采用流体布局,如之前的文章(自适应宽度布局),其他具体的小问题可以 ...

  4. 手机移动端网站开发流程HTML5

    手机移动端网站开发流程HTML5 最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗? ...

  5. 零基础C#网站开发实战教学（全套）最新更新2019-12-16。。。

    这是林枫山自己编写制作的全套Visual Studio 2013 C# 网站开发案例实战教学教程,欢迎下载学习. 下载目录链接如下(如果链接下载不了,请加QQ:714259796获取教程): 网站界面 ...

  6. 软件工程概论 网站开发要掌握的技术 &登录界面

    1.网站系统开发需要掌握的技术 一.界面和用户体验(Interface and User Experience) 1.1 知道如何在基本不影响用户使用的情况下升级网站.通常来说,你必须有版本控制系统( ...

  7. 手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应

    转自 http://my.oschina.net/cart/blog/282477 做前端开发不短了,用过jQuery Mobile jqMobi 也纯手工写过.. 最后总结如下: jQuery Mo ...

  8. jQuery Mobile手机网站案例

    jQuery Mobile手机网站案例 一.总结 一句话总结:jQuery Mobile是纯手机框架,和amazeui和bootstrap都可以做手机网站. 1.另一款文本编辑器? jd编辑器 二.j ...

  9. 移动平台3G手机网站前端开发布局技巧

    本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许 ...

随机推荐

  1. 洛谷 P1014 Cantor表

    P1014 Cantor表 题目描述 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 1/1 1/2 1/3 1/4 1/5 … 2/1 ...

  2. 简单的横向ListView实现(version 4.0)

    这个版本号的博客写起来颇费口舌.有些代码自己语言组织能力有限,感觉描写叙述起来非常费劲,前前后后改了五六遍稿子还是不尽人意 ,只是我还是坚持写出来自己当初的思路,假设看得不明确的地方我在文章最后仍然会 ...

  3. UML学习之用例图

    在UML的整个学习过程中,9种图(用例图.活动图.状态图.顺序图.类图.对象图.协作图.组件图.部署图)的学习以及常用开发.建模工具的使用是最为重要的一个阶段,它是进行UML建模的基础.在本篇文章中首 ...

  4. 原生js大总结一

    001.浅谈堆和栈的理解?   js变量存储有栈存储和堆存储,基本数据类型的变量存储在栈中,引用数据类型的变量存储在堆中 引用类型数据的地址也存在栈中   当访问基础类型变量时,直接从栈中取值.当访问 ...

  5. __block typeof的说明

    1. block不是Object对象,所以对retain无效,要想保留block生命周期,最好通过copy来实现,当然copy后,要记得release. 2.一般被block的应用的对象,retain ...

  6. Android Java使用JavaMail API发送和接收邮件的代码示例

    JavaMail是Oracle甲骨文开发的Java邮件类API,支持多种邮件协议,这里我们就来看一下Java使用JavaMail API发送和接收邮件的代码示例 使用Javamail发送邮件,必需的j ...

  7. 【Codeforces Round #434 (Div. 2) A】k-rounding

    [链接]h在这里写链接 [题意] 在这里写题意 [题解] 转换一下就是求n和10^k的最小公倍数. [错的次数] 0 [反思] 在这了写反思 [代码] #include <bits/stdc++ ...

  8. shiro 中的filterChainDefinitions详解(转)

    springrain使用shiro控制权限,配置filterChainDefinitions结合数据库校验权限. 我们在web.xml中配置一个全局过滤器,也就是在springrain配置的是一个sp ...

  9. 23种设计模式——Prototype模式

    Prototype模式是提供自我复制的功能.包括浅拷贝和深拷贝. 一.Prototype模式的用途 场景1:游戏场景中有很多类似的敌人,它们的技能都一样,但是随着敌人出现的位置和不同,它们的能力也不太 ...

  10. stm32的DMA重新工作

    下面是在战舰V3寄存器程序例子中找到的: //开启一次DMA传输void MYDMA_Enable(DMA_Channel_TypeDef*DMA_CHx){    DMA_CHx->CCR&a ...