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

深圳网站建设

搜索
应用资源 › 应用开发教程 › 前端教程 › 前端综合 › 网站建设之bootstrap响应式布局容器的宽度详细说明教程 ...
返回列表 发新帖
查看: 624|回复: 0

网站建设之bootstrap响应式布局容器的宽度详细说明教程

[复制链接]
admin

UID
1
贡献
844
金币
1540
主题
520
在线时间
333 小时
注册时间
2022-1-15
最后登录
2024-11-12
QQ
发表于 2022-12-23 22:21:10 | 624 | 0 | 显示全部楼层 |阅读模式
admin 2022-12-23 22:21:10 624 0 显示全部楼层
网站建设之bootstrap响应式布局容器的宽度详细说明教程

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
父容器版心的尺寸划分
  • 超小屏幕（手机，小于 768px）：设置宽度为 100%
  • 小屏幕（平板，大于等于 768px）：设置宽度为 750px
  • 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
  • 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

但是我们也可以根据实际情况自己定义划分
  1. /*==========================================================
  2. ****金黑网络主营业务：                                    
  3. *1，高端网站设计与建设,网站运营托管；                                    
  4. *2，网站维护,网站修改，功能开发，数据异常处理；                           
  5. *3，专业仿站,插件模板定制,程序源码开发；                                 
  6. *4，网页设计，图标logo设计，图片美工设计；                                
  7. *5，服务器托管，安全维护；                                                
  8. *6，视频制作，视频剪辑
  9. *7，商城网站，系统开发，公众号小程序app定制开发；
  10. ****我们的官网：www.jinhei.com   
  11. ****业务联系QQ：515138                                       
  12. ===========================================================*/
  13. /* jinhei1. 超小屏幕下  小于 768  布局容器的宽度为 100% */
  14. @media screen and (max-width: 767px) {
  15.     .container {
  16.         width: 100%;
  17.     }
  18. }

  20. /* jinhei2. 小屏幕下  大于等于768  布局容器改为 750px */
  21. @media screen and (min-width: 768px) {
  22.     .container {
  23.         width: 750px;
  24.     }
  25. }

  27. /* jinhei3. 中等屏幕下 大于等于 992px   布局容器修改为 970px */
  28. @media screen and (min-width: 992px) {
  29.     .container {
  30.         width: 970px;
  31.     }
  32. }

  34. /* jinhei4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
  35. @media screen and (min-width: 1200px) {
  36.     .container {
  37.         width: 1170px;
  38.     }
  39. }
复制代码
.container
  • 响应式布局的容器  固定宽度
  • 大屏 ( >=1200px)  宽度定为 1170px
  • 中屏 ( >=992px)   宽度定为  970px
  • 小屏 ( >=768px)   宽度定为  750px
  • 超小屏  (100%)

.container-fluid
  • 流式布局容器 百分百宽度
  • 占据全部视口（viewport）的容器。


网站建设之响应式布局容器的宽度详细说明教程

网站建设之响应式布局容器的宽度详细说明教程

网站建设之响应式布局容器的宽度详细说明教程

网站建设之响应式布局容器的宽度详细说明教程

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
  • 按照不同屏幕划分为1~12 等份
  • 行（row） 可以去除父容器作用15px的边距
  • xs-extra small：超小； sm-small：小；  md-medium：中等； lg-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>
复制代码
栅格嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*元素内。

网站建设之响应式布局容器的宽度详细说明教程

网站建设之响应式布局容器的宽度详细说明教程
  1. <!-- 列嵌套 -->
  2. <div class="col-sm-4">
  3.     <div class="row">
  4.          <div class="col-sm-6">小列</div>
  5.          <div class="col-sm-6">小列</div>
  6.     </div>
  7. </div>
复制代码
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。
代码：
  1. <!-- 列偏移 -->
  2.   <div class="row">
  3.       <div class="col-lg-4">1</div>
  4.       <div class="col-lg-4 col-lg-offset-4">2</div>
  5.   </div>
复制代码
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
  1. <!-- 列排序 -->
  2.   <div class="row">
  3.       <div class="col-lg-4 col-lg-push-8">左侧</div>
  4.       <div class="col-lg-8 col-lg-pull-4">右侧</div>
  5.   </div>
复制代码

网站建设之bootstrap响应式布局容器的宽度详细说明教程

网站建设之bootstrap响应式布局容器的宽度详细说明教程

响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

网站建设之bootstrap响应式布局容器的宽度详细说明教程

网站建设之bootstrap响应式布局容器的宽度详细说明教程

相关建站链接：
bootstrap框架, 前端教程, 响应式布局
楼主热帖

相关帖子
回复

举报

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

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

支付宝扫一扫打赏

微信扫一扫打赏

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