测开之路一百零六：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如果要验证信 ...
随机推荐
- PAT Basic 1014 福尔摩斯的约会 (20 分) Advanced 1061 Dating (20 分)
大侦探福尔摩斯接到一张奇怪的字条:我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm.大侦探很快就明白了,字条上奇 ...
- PAT Advanced 1002 A+B for Polynomials (25 分)（隐藏条件，多项式的系数不能为0）
This time, you are supposed to find A+B where A and B are two polynomials. Input Specification: Each ...
- 2019 ACM/ICPC 全国邀请赛（西安）J And And And （树DP+贡献计算）
Then n - 1n−1 lines follow. ii-th line contains two integers f_{a_i}(1 \le f_{a_i} < i)fai(1≤fa ...
- Codeforces 961 容斥叉积判共线 树状数组递增思想题
A B C D 给你N个点 问你能不能有两条直线穿过这N个点 首先假设这N个点是可以被两条直线穿过的 所以两条直线就把这N个点划分成两个集合 我们取1 2 3三个点这样必定会有两个点在一个集合内 ch ...
- 原始http下载图片生成文件
package com.example.demo.util; import java.io.*;import java.net.URL;import java.net.URLConnection;im ...
- WPF导出发布安装包，无法验证发行者解决办法
右击工程项目点发布->完成 此时在工程目录下生成了安装文件setup.exe 同时又在工程下生成了临时证书WpfApp1_TemporaryKey.pfx 如果此时强行安装会弹出如下警告 接下来 ...
- shell之文本过滤（正则表达式）
shell之文本过滤(正则表达式) 分类: linux shell脚本学习2012-09-14 12:59 213人阅读 评论(0) 收藏 举报 当从一个文件或命令输出中抽取或过滤文本时,可以使用正则 ...
- 并行操作多个序列map
>>> def add1(a): return a + 1 >>> def add2(a,b): return a + b >>> def add ...
- :last-child----represents the last element among a group of sibling elements.
CSS伪类 :last-child 代表在一群兄弟元素中的最后一个元素. 举个例子: 从代码和图可以看出:last-child选择了最后一个li标签. 同时,我们换另外一段代码,看看是否还有这样的效果 ...
- 【bzoj4551】【NOIP2016模拟7.11】树
题目 在2016年,佳媛姐姐刚刚学习了树,非常开心.现在他想解决这样一个问题:给定一颗有根树(根为1),有以下 两种操作:1. 标记操作:对某个结点打上标记(在最开始,只有结点1有标记,其他结点均无标 ...