首页 > 编程札记 > 编程

响应式布局Bootstrapwriting

阅读：评论：0

文章目录

- - - - 响应式布局
      - 响应式原理
        媒体查询
      - Bootstrap
      - Bootstrap中文文档
        基本模板
        响应式布局容器：.container
        流式布局容器： .container-fluid
        normalize和reset
        栅格系统
        响应式栅格系统
        栅格系统的扩展（嵌套、偏移offset、排序pull,push）
        内容的显示和隐藏(visible、hidden)
      - writing-mode复习

响应式布局

简言之，就是一个网站能够兼容多个终端，在新建网站上普遍采用响应式开发

响应式原理

媒体查询

/*
* 响应式容器：
* 1、在超小屏设备的时候  768px以下  当前容器的宽度100%   背景lightskyblue
* 2、在小屏设备的时候  768px~992px  当前容器的宽度750px  背景blueviolet
* 3、在中屏设备的时候  992px~1200px  当前容器的宽度为970px  背景yellowgreen
* 4、在大屏设备的时候  1200px以上  当前容器的宽度为1170px  背景#4e6ef2
*
* *//*使用媒体查询能针对不同屏幕区间设置不同的布局和样式*/
/*怎么使用媒体查询：关于媒体查询@media */
/*语法： @media screen and (min-width: 768px) and (max-width: 992px) {属性样式}*/div{width: 100%;height: 100%;
}
@media screen and (max-width: 768px) {/*1、在超小屏设备的时候  768px以下  当前容器的宽度100%   背景lightskyblue*/div{width: 100%;background-color: lightskyblue;}
}

Bootstrap

Bootstrap中文文档

基本模板

<!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明 en 英文 zh-CN 中文简体  zh-tw 中文繁体-->
<html lang="zh-CN">
<head><!--文档编码申明--><meta charset="utf-8"><!--要求当前网页使用浏览器最高版本的内核来渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--视口的设置：视口的宽度和设备宽度一致，默认的缩放比例和PC端一致，用户不能自行缩放 --><meta name="viewport" content="width=device-width, initial-scale=1"><!--上述三个meta标签必须放在最前面，其他任何内容必须紧随其后  按解析顺序--><!--优先加载浏览器解释--><title>Bootstrap 101 Template</title><!-- Bootstrap核心样式--><link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"><!-- html5shiv和respond分别用来解决IE8版本浏览器不支持H5标签和媒体查询的 不兼容问题--><!--警告：不能以file形式打开，本地打开。最好打开，因为respond.js的底层是ajax，用file会出现问题，ajax在部分浏览器下不能跨域--><!--[在IE 9以下引入]><script src="lib/html5shiv/html5shiv.min.js"></script><script src="lib/respond/respond.min.js"></script><![endif]-->
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal
</button><!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel">Modal title</h4></div><div class="modal-body">此间少年，此生尽兴便可！</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div>
</div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="lib/jquery/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

响应式布局容器：.container

流式布局容器： .container-fluid

normalize和reset

都是增强浏览器的表现一致性但是normalize不会重置已经一致的元素（如ul: reset.css list-style:none;）

栅格系统

栅格系统：行(row)和列(col)的布局，网格状布局

<!--响应式布局容器-->
<div class="container"><!--栅格系统：其实就是行和列的布局，网格状布局--><!--行：row--><!--.container容器默认有15px的左右内边距  .row填充父容器15px的左右内边距  margin-left,margin-right:-15px--><div class="row"></div><div class="myRow"></div>
</div>

<!--响应式布局容器-->
<div class="container"><!--栅格系统：其实就是行和列的布局，网格状布局--><!--行：row--><!--.container容器默认有15px的左右内边距  .row填充父容器15px的左右内边距  margin-left,margin-right:-15px--><div class="row"><!--列：col-*-* *不确定（参数）--><!--col：列样式第一个*：屏幕的大小大屏设备  lg  大屏及以上生效中屏设备  md  中屏及以上生效小屏设备  sm  小屏及以上生效超小屏设备  xs  超小屏及以上生效第二个*：占多少份，每一行默认分成12等份--><div class="col-xs-4"></div><div class="col-xs-4"></div><div class="col-xs-4"></div></div><!--<div class="myRow"></div>-->
</div>

响应式栅格系统

<!--需求：
大屏设备 让div平均分成6份
中屏设备  让div平均分成4份
小屏设备 让div平均分成3份
超小屏设备 让div平均分成2份
--><!--响应式布局容器-->
<div class="container"><div class="row"><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div><div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div></div>
</div>

栅格系统的扩展（嵌套、偏移offset、排序pull,push）

<div class="container"><div class="row"><!--栅格嵌套--><div class="col-lg-4 col-md-4"><div class="row"><div class="col-xs-6"></div><div class="col-xs-6"></div></div></div><!--列的偏移--><div class="col-lg-4 col-md-4"><div class="row"><div class="col-xs-3"></div><div class="col-xs-6 col-xs-offset-3"></div></div></div><!--列的排序--><!--push:往后推--><!--pull:往前拉--><div class="col-lg-4 col-md-4"><div class="row"><div class="col-xs-3 col-xs-push-9">col-xs-3</div><div class="col-xs-9 col-xs-pull-3">col-xs-9</div></div></div></div>
</div>

内容的显示和隐藏(visible、hidden)

<!--
大屏设备  显示
中屏设备  隐藏
小屏设备  显示
超小屏设备 隐藏visible-lg 大屏显示其他隐藏，md,sm,xs同理3.2版本之后建议使用hiddenhidden-lg
-->
<div class="hidden-md hidden-xs">内容</div><div class="visible-lg visible-sm">内容</div>

writing-mode复习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*writing-mode的语法：*//*writing-mode：horizontal-tb | vertical-rl | vertical-lr*//*默认值：horizontal-tb*/html,body{width: 100%;height: 100%;padding: 0;margin: 0;background-color: #000;}.lyrics{margin-top: 20px;text-shadow: 0px 1px 1px #333;writing-mode: vertical-rl;font-family: 华文行楷;font-weight: 700;}.lyrics h1{padding:100px 30px;color: #4e6ef2;}.lyrics p:not(.author){line-height: 0px;letter-spacing: 5px;color: #4e6ef2;font-size: 20px;}.author{text-align: right;color: lightskyblue;font-size: 20px;}strong{font-size: 30px;}</style>
</head>
<body>
<div class="lyrics"><h1>鱼遇</h1><p>“你说她从故事里脱身了吗?”</p><br><p>她也许本就不曾等什么,只是听闻的人多了情,平白为此失魂落魄</p><br><p>别再去猜测爱恨的去处, 这是缅怀与遗憾的罪证,</p><br><p>偏偏戴罪之人最爱说谎, 两两相忘不过易事一桩!</p><br><p class="author">——依旧在雨中 <strong>等</strong>你</p>
</div>
</body>
<html>

本文发布于:2024-02-02 09:11:48，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170683630942792.html

上一篇：iOS 常用技术收藏

下一篇：超详细的操作符解析

标签：布局 Bootstrapwriting

留言与评论（共有 0 条评论）