测开之路一百零六：bootstrap布局
可以在html的head里面加一些说明
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--网页源数据跨平台兼容做一些说明-->
<meta name="viewport" content="width=device-width, initial-scale=1"><!--跨屏自适应说明-->
引入bootstrap和jquery
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
bootstrap效果
如，按钮：class="btn btn-defult"
<a href="#" >普通按钮</a>
<a href="#" class="btn btn-default">bootstrap按钮</a>
bootstrap网格系统
需先声明一个容器，class="container"，bootstrap会将这个容器等分为12列，并且根据屏幕的尺寸自动分为大尺寸、中等尺寸、小尺寸、极小尺寸，并且进行自适应排版
具体效果
固定布局和流式布局
固定布局：不管屏幕怎么变化，两边始终都会留一些空白（此布局常用）
流式布局：内容始终充满两边的屏幕
指定屏幕适应方式
缩小屏幕（缩小整个浏览器框架，非显示缩放）
容器里面嵌套容器
偏移
自适应隐藏元素
缩小窗口自动隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> <!--网页源数据跨平台兼容做一些说明-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--跨屏自适应说明-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.box{
border: 1px solid black;
}
</style>
</head>
<body>
<h1>bootstrap布局</h1> <!--三种布局--> <!--非bootstrap布局-->
<div style="border: 1px solid black">
<p>这是没有用bootstrap布局的段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor quidem tempore temporibus.
Accusantium aliquid autem commodi consequuntur delectus dolores ex ipsa iusto magni, nisi numquam pariatur
quidem ut, voluptatem.</p>
</div>
<!--声明bootstrap容器，固定布局：class="container"-->
<div class="container">
<!--声明容器里的行:div class="row"-->
<div class="row">
<!--声明中等屏幕，占6列：class="col-md-6"-->
<div class="col-md-6" style="border: 1px solid black">
<p>这是使用bootstrap固定布局的段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor quidem tempore temporibus.
Accusantium aliquid autem commodi consequuntur delectus dolores ex ipsa iusto magni, nisi numquam pariatur
quidem ut, voluptatem.</p>
</div>
<div class="col-md-6" style="border: 1px solid black">
<p>这是使用bootstrap固定布局的段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor quidem tempore temporibus.
Accusantium aliquid autem commodi consequuntur delectus dolores ex ipsa iusto magni, nisi numquam pariatur
quidem ut, voluptatem.</p>
</div>
</div>
</div>
<!--声明bootstrap容器，流式布局，始终充满屏幕：class="container-fluid"-->
<div class="container-fluid">
<!--声明容器里的行:div class="row"-->
<div class="row">
<div class="col-md-6" style="border: 1px solid black">
<p>这是使用bootstrap流式布局的段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor quidem tempore temporibus.
Accusantium aliquid autem commodi consequuntur delectus dolores ex ipsa iusto magni, nisi numquam pariatur
quidem ut, voluptatem.</p>
</div>
<div class="col-md-6" style="border: 1px solid black">
<p>这是使用bootstrap流式布局的段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor quidem tempore temporibus.
Accusantium aliquid autem commodi consequuntur delectus dolores ex ipsa iusto magni, nisi numquam pariatur
quidem ut, voluptatem.</p>
</div>
</div>
</div>
<p> </p> <!--指定自适应屏幕-->
<!--声明bootstrap容器，固定布局：class="container"-->
<div class="container"> <div class="row">
<!--声明中等屏幕占6列，小屏幕直接占12列-->
<div class="col-md-6 col-sd-12 box">
<p>这是使用bootstrap固定布局的段落，第1行的前六列 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor quidem tempore temporibus.
Accusantium aliquid autem commodi consequuntur delectus dolores ex ipsa iusto magni, nisi numquam pariatur
quidem ut, voluptatem.</p>
</div>
<div class="col-md-6 col-sd-12 box">
<p>这是使用bootstrap布局的段落，第1行的后六列 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor quidem tempore temporibus.
Accusantium aliquid autem commodi consequuntur delectus dolores ex ipsa iusto magni, nisi numquam pariatur
quidem ut, voluptatem.</p>
</div>
</div> <div class="row">
<!--声明中等屏幕占4列，小屏幕直接占12列-->
<div class="col-md-4 col-sd-12 box">
<p>这是使用bootstrap布局的段落，第二行的前4列 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor quidem tempore temporibus.
Accusantium aliquid autem commodi consequuntur delectus dolores ex ipsa iusto magni, nisi numquam pariatur
quidem ut, voluptatem.</p>
</div>
<div class="col-md-4 col-sd-12 box">
<p>这是使用bootstrap布局的段落，第二行的中间4列 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor quidem tempore temporibus.
Accusantium aliquid autem commodi consequuntur delectus dolores ex ipsa iusto magni, nisi numquam pariatur
quidem ut, voluptatem.</p>
</div>
<div class="col-md-4 col-sd-12 box">
<p>这是使用bootstrap布局的段落，第二行的后4列 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor quidem tempore temporibus.
Accusantium aliquid autem commodi consequuntur delectus dolores ex ipsa iusto magni, nisi numquam pariatur
quidem ut, voluptatem.</p>
</div>
</div>
<p> </p> <!--快捷键div.col-md-6+table
<div class="col-md-6"></div>
--> <!--容器里面再分容器-->
<!--声明bootstrap容器，固定布局：class="container"-->
<div class="container">
<div class="row">
<!--声明中等屏幕占6列，小屏幕直接占12列-->
<div class="col-md-6 col-sd-12 box">
<div class="row">
<div class="col-md-4 col-sd-12 box"><!--声明占4列-->
<p>这是前六列视为一个容器里面的前4列 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor quidem tempore temporibus.
Accusantium aliquid autem commodi consequuntur delectus dolores ex ipsa iusto magni, nisi numquam pariatur
quidem ut, voluptatem.</p>
</div>
<div class="col-md-4 col-sd-12 box">
<p>这是前六列视为一个容器里面的中间4列 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor quidem tempore temporibus.
Accusantium aliquid autem commodi consequuntur delectus dolores ex ipsa iusto magni, nisi numquam pariatur
quidem ut, voluptatem.</p>
</div>
<div class="col-md-4 col-sd-12 box">
<p>这是前六列视为一个容器里面的后4列 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor quidem tempore temporibus.
Accusantium aliquid autem commodi consequuntur delectus dolores ex ipsa iusto magni, nisi numquam pariatur
quidem ut, voluptatem.</p>
</div>
</div> </div>
<div class="col-md-6 col-sd-12 box">
<p>这是后六列 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor quidem tempore temporibus.
Accusantium aliquid autem commodi consequuntur delectus dolores ex ipsa iusto magni, nisi numquam pariatur
quidem ut, voluptatem.</p>
</div>
</div>
</div>
</div> <!--偏移-->
<p> </p> <!--声明bootstrap容器，固定布局：class="container"-->
<div class="container">
<div class="row">
<!--声明占6列，默认是左对齐，改为居中，偏移3-->
<div class="col-md-6 col-md-offset-3 box">
<p>这是使用bootstrap布局的段落，声明占6列，默认是左对齐，改为居中，偏移3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor quidem tempore temporibus.
Accusantium aliquid autem commodi consequuntur delectus dolores ex ipsa iusto magni, nisi numquam pariatur
quidem ut, voluptatem.</p>
</div>
</div>
</div> <p> </p> <!--自适应显示或隐藏元素-->
<!--声明bootstrap容器，固定布局：class="container"-->
<div class="container">
<div class="row">
<!--设置当为小屏幕时不显示:hidden-xs:小屏是隐藏 text-center：居中-->
<div class="row">
<div class="col-md-12 hidden-xs text-center">
© 版权所有
</div>
</div>
</div>
</div> <p> </p> </body>
</html>
测开之路一百零六：bootstrap布局的更多相关文章
- 测开之路一百零九：bootstrap列表
bootstrap列表 引入bootstrap标签 原本的效果 水平显示 bootstrap列表 列表组合框 在组合框后面加备注 突出显示 a标签列表 <!DOCTYPE html>< ...
- 测开之路一百零七：bootstrap排版
引入bootstrap和jquery 标题 对齐 正文强调 引言 <!DOCTYPE html><html lang="en"><head> & ...
- 测开之路一百零五：bootstrap的两种引用方式
一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...
- 测开之路一百零四：jquery操作样式
jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 ...
- 测开之路一百零三：jquery元素和标签的插入与删除
标签内插入 标签外插入 给标签加标签 !DOCTYPE html><html lang="en"><head> <meta charset=&q ...
- 测开之路一百零二：jquery元素操作
jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...
- 测开之路一百零一：jquery文字特效、动画、方法链
文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> ...
- 测开之路一百二十六：flask之获取request请求数据
可以根据flask的request对象获取所有的请求信息 path = request.path # 获取请求地址method = request.method # 获取请求方法ip = reques ...
- 测开之路一百五十五：jquery-validation前台数据验证
前面做的wtform验证是服务器端的验证,需要把数据传输到服务器,服务器验证后再吧结果传输到前端,网络慢的时候,用户体验不好,所以需要前端验证,且后端验证不能少 传统的js或者jquery如果要验证信 ...
随机推荐
- 深度学习之（经典）卷积层计算量以及参数量总结 （考虑有无bias，乘加情况）
目录: 1.经典的卷积层是如何计算的 2.分析卷积层的计算量 3.分析卷积层的参数量 4.pytorch实现自动计算卷积层的计算量和参数量 1.卷积操作如下: http://cs231n.github ...
- 设计模式开闭原则--java
静态工厂模式 + 反射控制入参范围 public interface IPrinter { void print(); } public class CanonPrinter implements I ...
- 磁盘IO性能优化-实践
RAID卡缓存策略调整 原因详解 操作实例 I/O 调度算法 文件系统journal 磁盘挂载参数 操作实例 性能数据对比 RAID卡缓存策略调整 可以将RAID卡缓存策略由No Write Cach ...
- Revolver Maps-3D地球仪网站定制
这是个网站统计的小插件,大家可以看到那些国家,哪些城市对本网站进行了访问,很直观的一种表现方式. 这个小插件不需要你写任何代码,只需要去它官方网站定制你自己需要的代码.它的地址是:http://www ...
- hdu 4638 Group（离线+树状数组）
Group Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- VMware虚拟机磁盘文件vmdk单文件转多文件相互转换
设置环境变量 set PATH=%PATH%;D:\Program Files (x86)\VMware\VMware Workstation echo %PATH% C:\Users\Admi ...
- flask项目中设置logo
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}&qu ...
- JavaSE---泛型系统学习
1.概述 1.1.泛型: 允许在 定义 类.接口.方法时 使用 类型形参,这个类型形参 将在声明变量.创建对象.调用方法时 动态地指定: 1.2.jdk5后,引入了 参数化类型(允许程 ...
- Arduino-舵机
舵机一般都外接三根线,一般棕色为接地线(GND),红色为电源正极线(VCC),橙色为信号线(PWM). 用Arduino控制舵机的方法有两种: 一种是通过Arduino的普通数字传感器接口产生占空比不 ...
- Spring Batch Hello World
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11995146.html Project Directory Maven Dependency < ...