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

深圳网站建设

搜索
搜索附件  
金黑网络 › 附件中心 › 应用开发教程 › 前端教程 › html教程 ›bootstrap自适应响应式前端开发框架媒体查询图文最详细操作教程附带代码: 3.jpg

板块导航

热门下载

左侧广告
版权所有：金黑网络
For 2013-2023 © jinhei.com

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

附件信息右侧广告
附件下载与主题内容间广告

 

点击附件下载：下载附件
bootstrap自适应响应式前端开发框架媒体查询图文最详细操作教程附带代码:
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)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。



==行(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，栅格系统列排序
  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版本给大家。


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) {}
复制代码



同一主题附件字上面广告
小程序系统开发 · 服务流程

千里之行，始于足下 / 迈出开发项目第一步，从联系我们开始

友情链接 / LINKS

不达标就退款 高性价比建站 免费网站代备案 1对1原创设计服务 7×24小时售后支持
建站百科
主营业务
新闻动态
了解我们
全国免费咨询
178-178-178-16

QQ业务咨询：515138 / 6369341

联系地址：深圳市龙岗区盛龙路60号和中心12楼

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

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

支付宝扫一扫打赏

微信扫一扫打赏

返回顶部