请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站
开启辅助访问 切换到宽版
快捷导航 发布信息
搜索
自丢网»社区论坛 › 建站程序/IT教程 › Html/Html5教程 › bootstrap自适应响应式前端开发框架媒体查询图文最详细 ...

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

[复制链接]
查看1028 | 回复1 | 2022-6-14 09:04 | 显示全部楼层 |阅读模式
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>

  11.     </div>
复制代码
怕不同版本，会导致不同效果，分享个我在使用的bootstrap 3.4版本给大家。
bootstrap.zip (249.42 KB, 下载次数: 0, 售价: 5 丢币)
bootstrap教程, 自适应框架, boot操作教程, 自适应开发教程

相关帖子
回复

举报

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

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

admin

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-4-16
回复楼主 返回列表