深圳市金黑网络技术有限公司始终坚持以用户需求为导向，提供安全、稳定、高效的产品和服务！
签到 · 搜索导航 · 服务热线 · 微信/手机：17817817816

深圳网站建设

搜索
应用资源 › 应用开发教程 › 前端教程 › html教程 › bootstrap自适应响应式前端开发框架媒体查询图文最详细 ...
返回列表 发新帖
查看: 1033|回复: 0

bootstrap自适应响应式前端开发框架媒体查询图文最详细操作教程附带代码

[复制链接]
admin

UID
1
贡献
844
金币
1540
主题
520
在线时间
333 小时
注册时间
2022-1-15
最后登录
2024-11-12
QQ
发表于 2022-6-18 08:49:09 | 1033 | 0 | 显示全部楼层 |阅读模式
admin 2022-6-18 08:49:09 1033 0 显示全部楼层
bootstrap自适应响应式前端开发框架图文最详细操作教程附带代码

默认自适应bootstrap前端开发框架演示模板：
  1. <!DOCTYPE html>
  2. <html lang="cn">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <!--[if lt IE 9]>
  8.       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  9.       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  10.     <![endif]-->
  11.     <!-- 一定不要忘记引入bootstrap 的样式文件 -->
  12.     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  13.     <script src="bootstrap/js/bootstrap.min.js"></script>
  14.     <title>自丢网自适应页面</title>
  15. </head>
  16. <body>
  17.     <div class="container">
  18.         <div class="row">
  19.             <div class="col-md-3">左侧</div>
  20.         </div>
  21.     </div>
  22. </body>
  23. </html>
复制代码

1，布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫它提供了两个作此用处的类。
1.1，container类
响应式布局的容器固定宽度
==大屏(>=1200px)宽度定为1170px
==中屏(>=992px)宽度定为970px
==小屏(>=768px)宽度定为750px
==超小屏(100%)

1.2，container-fluid类
流式布局容器百分百宽度。
占据全部视口(viewport)的容器。
适合于单独做移动端开发。


2，栅格选项参数
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

1.jpg

==行(row)必须放到container布局容器里面
==我们实现列的平均划分需要给列添加类前缀
==xs-extra small：超小；sm-small：小；md-medium :中等;Ig-large：大。
==列(column)大于12，多余的“列(column)”所在的元素将被作为一个整体另起一行排列
==每一列默认有左右15像素的padding
==可以同时为一列指定多个设备的类名，以便划分不同份数例如class="col-md-4 col-sm-6"


案例代码源码：
  1.   <div class="container">
  2.         <div class="row">
  3.             <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
  4.             <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
  5.             <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
  6.             <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
  7.         </div>
  8.         <!-- 如果孩子的份数相加等于12 则孩子能占满整个 的container 的宽度 -->
  9.         <div class="row">
  10.             <div class="col-lg-6">1</div>
  11.             <div class="col-lg-2">2</div>
  12.             <div class="col-lg-2">3</div>
  13.             <div class="col-lg-2">4</div>
  14.         </div>
  15.         <!-- 如果孩子的份数相加 小于 12 则会？ 则占不满整个container 的宽度 会有空白 -->
  16.         <div class="row">
  17.             <div class="col-lg-6">1</div>
  18.             <div class="col-lg-2">2</div>
  19.             <div class="col-lg-2">3</div>
  20.             <div class="col-lg-1">4</div>
  21.         </div>
  22.         <!-- 如果孩子的份数相加 大于 12 则会？多于的那一列会 另起一行显示  -->
  23.         <div class="row">
  24.             <div class="col-lg-6">1</div>
  25.             <div class="col-lg-2">2</div>
  26.             <div class="col-lg-2">3</div>
  27.             <div class="col-lg-3">4</div>
  28.         </div>
  29.     </div>
复制代码
供学习参考。


3，栅格系统列嵌套
代码：
  1.   <div class="container">
  2.         <div class="row">
  3.             <div class="col-md-4">
  4.                 <!-- 我们列嵌套最好加1个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高 -->
  5.                 <div class="row">
  6.                     <div class="col-md-4">a</div>
  7.                     <div class="col-md-8">b</div>
  8.                 </div>
  9.             </div>
  10.             <div class="col-md-4">2</div>
  11.             <div class="col-md-4">3</div>
  12.         </div>
  13.     </div>
复制代码
4，栅格系统列偏移
  1.     <div class="container">
  2.         <div class="row">
  3.             <div class="col-md-3">左侧</div>
  4.             <!-- 偏移的份数 就是 12 - 两个盒子的份数 = 6 -->
  5.             <div class="col-md-3 col-md-offset-6">右侧</div>
  6.         </div>
  7.         <div class="row">
  8.             <!-- 如果只有一个盒子 那么就偏移 = (12 - 8) /2 -->
  9.             <div class="col-md-8 col-md-offset-2">中间盒子</div>
  10.         </div>
  11.     </div>
复制代码
5，栅格系统列排序 2.jpg
  1. <div class="container">
  2.         <div class="row">
  3.             <div class="col-md-4 col-md-push-8">左侧</div>
  4.             <div class="col-md-8 col-md-pull-4">右侧</div>
  5.         </div>
  6.     </div>
复制代码
6，栅格系统响应式工具

代码演示：
  1. <div class="container">
  2.         <div class="row">
  3.             <div class="col-xs-3">
  4.                 <span class="visible-lg">我会显示哦</span>
  5.             </div>
  6.             <div class="col-xs-3">2</div>
  7.             <div class="col-xs-3 hidden-md hidden-xs">我会变魔术哦</div>
  8.             <div class="col-xs-3">4</div>
  9.         </div>

  11.     </div>
复制代码
怕不同版本，会导致不同效果，分享个我在使用的bootstrap 3.4版本给大家。
3.jpg

css通用媒体查询代码如下：
  1. /********************
  2. 金黑出品，必属精品
  3. 官网网址：www.jinhei.com
  4. 版权所有，盗用必究
  5. **********************/
  6. @charset "utf-8";
  7. /**超大屏幕显示**/
  8. @media screen and (min-width:1201px){}
  9. /**大屏幕显示**/
  10. @media screen and (min-width:993px) and (max-width:1200px){}
  11. /**中等幕显示**/
  12. @media screen and (min-width:769px) and (max-width:992px){}
  13. /**手机幕显示**/
  14. @media (max-width: 768px) {}
复制代码

bootstrap.zip (249.42 KB, 下载次数: 0, 售价: 1 金币)

自适应开发, h5页面制作, bootstrap框架, 响应式教程
楼主热帖

相关帖子
回复

举报

返回列表 发新帖
Copyright © 2013-2023 深圳市金黑网络技术有限公司 版权所有    备案号：粤ICP备2021124338号    粤公网安备 44030702003689号

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表