當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Bootstrap手机网站开发案例

發布時間：2024/4/13 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Bootstrap手机网站开发案例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

1 <?php 2 include 'public/common/config.php'; 3 $sql="select * from message"; 4 $rst=mysql_query($sql); 5 6 ?> 7 <!doctype html> 8 <html lang="en"> 9 <head> 10 <meta charset="UTF-8"> 11 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 12 <title>動漫樂園</title> 13 <link rel="stylesheet" href="public/bs/css/bootstrap.min.css"> 14 <script src="public/js/jquery.js"></script> 15 <script src="public/bs/js/bootstrap.min.js"></script> 16 <style> 17 *{ 18 font-family: 微軟雅黑; 19 font-size:16px; 20 } 21 .navbar-brand{ 22 padding:0px; 23 } 24 25 .page{ 26 padding-top:60px; 27 } 28 29 .navbar2{ 30 padding-right:15px; 31 } 32 33 .panel-primary{ 34 margin-top:15px; 35 margin-bottom:15px; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="container page"> 41 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 42 <div class="container"> 43 <div class="navbar-header"> 44 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 45 <span class="sr-only">Toggle navigation</span> 46 <span class="icon-bar"></span> 47 <span class="icon-bar"></span> 48 <span class="icon-bar"></span> 49 </button> 50 <a class="navbar-brand" href="index.php"> 51 <img src="public/images/logo.png" alt=""> 52 </a> 53 </div> 54 55  56 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 57 <ul class="nav navbar-nav navbar-right"> 58 <li><a href="add.php">發布動漫</a></li> 59 </ul> 60 </div> 61 </div> 62 63 </nav> 64 65 66  67 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 68  69 <ol class="carousel-indicators"> 70 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 71 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 72 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 73 </ol> 74 75  76 <div class="carousel-inner"> 77 <div class="item active"> 78 <img src="public/images/a.jpg" alt="..."> 79 </div> 80 <div class="item"> 81 <img src="public/images/b.jpg" alt="..."> 82 </div> 83 <div class="item"> 84 <img src="public/images/c.jpg" alt="..."> 85 </div> 86 </div> 87 88  89 <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 90 <span class="glyphicon glyphicon-chevron-left"></span> 91 </a> 92 <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 93 <span class="glyphicon glyphicon-chevron-right"></span> 94 </a> 95 </div> 96 97  98 <?php 99 while($row=mysql_fetch_assoc($rst)){ 100 ?> 101 102 <div class="panel panel-primary"> 103 <div class="panel-heading"> 104 <div class="panel-title"> 105 <img src="public/images/head.jpg" alt=""> 106 <span><?php echo $row[title]?></span> 107 </div> 108 </div> 109 <div class="panel-body"> 110 <?php echo htmlspecialchars_decode($row[content]) ?> 111 </div> 112 113 <div class="panel-footer"> 114 <span><span class='label label-primary'>發布者:</span> user1</span> 115 <span style='margin-left:10px;'><span class='label label-danger'>發布時間:</span> 2015.10.27</span> 116 </div> 117 </div> 118 119 <?php 120 } 121 ?> 122 123 124  125 <nav class="navbar navbar-inverse navbar2" role="navigation"> 126 <ul class="nav navbar-nav navbar-left"> 127 <li><a href="#">www.lampym.com</a></li> 128 </ul> 129 <ul class="nav navbar-nav navbar-right bottom-right"> 130 <li><a href="#">云知夢，只為有夢想的人!</a></li> 131 </ul> 132 </nav> 133 </div> 134 </body> 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> 145 </html>

2、add.php

1 <?php 2 include 'public/common/config.php'; 3 $sql="select * from message"; 4 $rst=mysql_query($sql); 5 6 ?> 7 <!doctype html> 8 <html lang="en"> 9 <head> 10 <meta charset="UTF-8"> 11 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 12 <title>index</title> 13 <link rel="stylesheet" href="public/bs/css/bootstrap.min.css"> 14 <script src="public/js/jquery.js"></script> 15 <script src="public/bs/js/bootstrap.min.js"></script> 16 <script src="public/kd/kindeditor-min.js"></script> 17 <style> 18 *{ 19 font-family: 微軟雅黑; 20 font-size:16px; 21 } 22 .navbar-brand{ 23 padding:0px; 24 } 25 26 .page{ 27 padding-top:60px; 28 } 29 30 .navbar2{ 31 padding-right:15px; 32 } 33 34 .panel-primary{ 35 margin-top:15px; 36 margin-bottom:15px; 37 } 38 39 .ke-container{ 40 width:100%!important; 41 } 42 </style> 43 </head> 44 <body> 45 <div class="container page"> 46 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 47 <div class="container"> 48 <div class="navbar-header"> 49 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 50 <span class="sr-only">Toggle navigation</span> 51 <span class="icon-bar"></span> 52 <span class="icon-bar"></span> 53 <span class="icon-bar"></span> 54 </button> 55 <a class="navbar-brand" href="index.php"> 56 <img src="public/images/logo.png" alt=""> 57 </a> 58 </div> 59 60  61 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 62 <ul class="nav navbar-nav navbar-right"> 63 <li><a href="add.php">發布動漫</a></li> 64 </ul> 65 </div> 66 </div> 67 68 </nav> 69 70 <div class="panel panel-primary"> 71 <div class="panel-heading"> 72 <div class="panel-title"> 73 <img src="public/images/head.jpg" alt=""> 74 <span>發布動漫</span> 75 </div> 76 </div> 77 <div class="panel-body"> 78 <form action="insert.php" method='post'> 79 <div class="form-group"> 80 <label for="">發布者:</label> 81 <input type="text" class='form-control' name='username'> 82 </div> 83 84 <div class="form-group"> 85 <label for="">動漫名稱:</label> 86 <input type="text" class='form-control' name='title'> 87 </div> 88 89 <div class="form-group"> 90 <label for="">動漫簡介:</label> 91 <textarea name="content" id="txt" cols="30" rows="10" class='form-control'></textarea> 92 </div> 93 94 <div class="form-group"> 95 <input type="submit" value="Ok" class='btn btn-primary'> 96 <input type="reset" value="Cancel" class='btn btn-danger'> 97 </div> 98 </form> 99 </div> 100 </div> 101 102 <nav class="navbar navbar-inverse navbar2" role="navigation"> 103 <ul class="nav navbar-nav navbar-left"> 104 <li><a href="#">www.lampym.com</a></li> 105 </ul> 106 <ul class="nav navbar-nav navbar-right bottom-right"> 107 <li><a href="#">云知夢，只為有夢想的人!</a></li> 108 </ul> 109 </nav> 110 </div> 111 </body> 112 <script> 113 w=$(window).width(); 114 115 if(w<700){ 116 $('.bottom-right').hide(); 117 $('.navbar-left').css({'text-align':'center'}); 118 } 119 120 $('.panel-body img').addClass('img-responsive'); 121 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 }); 134 135 </script> 136 </html>

3、insert.php

1 <?php 2 include 'public/common/config.php'; 3 4 $username=$_POST['username']; 5 $title=$_POST['title']; 6 $content=htmlspecialchars(addslashes($_POST['content'])); 7 $time=time(); 8 9 $sql="insert into message(username,title,content,time) values('{$username}','{$title}','{$content}','{$time}')"; 10 11 if(mysql_query($sql)){ 12 header('location:index.php'); 13 }; 14 15 ?>

總結

以上是生活随笔為你收集整理的Bootstrap手机网站开发案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：使用SpringMVC 的Multipa
下一篇：有关sublime的一些使用