深圳市金黑网络技术有限公司:主营高端网站建设,网络推广,商城/系统开发,公众号小程序app开发等业务。
admin 发表于 2022-6-14 09:04 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题 |

☛ 深圳市金黑网络技术有限公司主营业务 ☚

网站建设,托管维护,网站SEO优化,关键词优化排名,全网推广,商城开发,系统开发,美工设计,域名主机,公众号小程序app软件开发等

欢迎联系我们,QQ:515138 手机/微信:17817817816

联系我们
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)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。

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

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




==行(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,栅格系统列排序

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

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

  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,栅格系统响应式工具

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

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

代码演示:
  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>

  10.     </div>
复制代码
怕不同版本,会导致不同效果,分享个我在使用的bootstrap 3.4版本给大家。
bootstrap.zip (249.42 KB, 下载次数: 0, 售价: 5 丢币)

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


推荐给好友: [复制链接]
推荐文章
回复

使用道具 举报

精彩评论1

admin 发表于 2022-6-14 11:21 | 显示全部楼层 |
html5标签,常用新增语义化标签
<header> :头部标签
<nav> : 导航标签
<article> :内容标签
<section> :块级标签
<aside> :侧边栏标签
<footer> :尾部标签
回复

使用道具 举报

发布主题
  • 网站建设

    高端网站设计制作

  • 模板制作

    仿站/效果图转模板

  • 网络推广

    关键词优化/全网推广

  • 技术维护

    网站维护/异常处理

  • 小程序开发

    公众号/小程序开发

  • 系统开发

    商城系统/各类系统开发

  • 定制开发流程

    业务咨询 | 提交需求 | 报价报时 | 付款开工

    联系我们
  • 今日更新:0 昨日更新:1
  • 会员总数:501 模板总数:10182
全国最大PB建站模板下载平台
在线技术QQ

515138

周一至周日9:00-23:00

如有侵权请联系我们

515138@qq.com 在线QQ咨询

微信扫码关注我们