自丢网

标题: bootstrap自适应响应式前端开发框架媒体查询图文最详细操作教程附带代码 [打印本页]
作者: admin    时间: 2022-6-14 09:04
标题: 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)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

(, 下载次数: 210)