学习bootstarp第一天
一、下载bootstarp(https://v3.bootcss.com/),解压并将文件放入自己项目里去使用即可
二、安装bootstarp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三线码工</title>
<!-- 引入Bootstrap核心样式文件(必须) -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 引入Bootstrap默认主题样式(可选) -->
<link rel="stylesheet" href="css/bootstrap.theme.min.css">
<!-- 你自己的样式或其他文件,自己的css文件最好放最后,可以覆盖框架-->
<link rel="stylesheet" href="example.css">
</head>
<body>
<!-- 你的HTML结构...... -->
<!-- 以下代码,如果不使用JS插件则不需要 -->
<!-- 由于Bootstrap的JS插件依赖jQuery,so 引入jQuery -->
<script src="js/jquery.min.js"></script>
<!-- 引入所有的Bootstrap的JS插件 -->
<script src="bootstrap.min.js"></script>
<!-- 你自己的脚本文件,自己的js文件一般放最后 -->
<script src="example.js"></script>
</body>
</html>
三、bootstarp模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title> <!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
以上是官方bootstarp提供的模板,以后安装可以参照此模板写项目。
bootstarp一些标签的解释
1. <meta charset="utf-8">
文档的编码格式 utf-8 ,国际通用,中文编码也可以 gbk 之类的
2..<meta http-equiv="X-UA-Compatible" content="IE=edge">
此属性为文档兼容模式声明,表示如果在IE浏览器下则使用最新的标准渲染当前文档
<meta name="renderer" content="webkit">
将下面的 <meta>
标签加入到页面中,可以让部分国产浏览器默认采用高速模式渲染页面:
3. <meta name="viewport" content="width=device-width, initial-scale=1">
- 视口的作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示
- 目前大多数手机浏览器的视口(承载页面的容器)宽度都是980;
- 视口的宽度可以通过meta标签设置
- 此属性为移动端页面视口设置,当前值表示在移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1)
- width:视口的宽度
- initial-scale:初始化缩放
- user-scalable:是否允许用户自行缩放(值:yes/no; 1/0)
- minimun-scale:最小缩放initial-scale
四、bootstarp css文档
https://v3.bootcss.com/css/
1.栅格
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
---|---|---|---|---|
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None (自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
列(column)数 | 12 | |||
最大列(column)宽 | 自动 | ~62px | ~81px | ~97px |
槽(gutter)宽 | 30px (每列左右均有 15px) | |||
可嵌套 | 是 | |||
偏移(Offsets) | 是 | |||
列排序 | 是 |
案例,对一个div里面进行分割,不同屏幕时三个小div所占的位置各不相同(下面小屏幕指手机屏幕768px)
学习bootstarp第一天的更多相关文章
- RabbitMQ学习总结 第一篇:理论篇
目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...
- 学习KnockOut第一篇之Hello World
学习KnockOut第一篇之Hello World 笔者刚开始学习KnockOut.写的内容就相当于一个学习笔记.且在此处向官网致敬,比较喜欢他们家的Live Example版块,里面有jsFiddl ...
- ActionBarSherlock学习笔记 第一篇——部署
ActionBarSherlock学习笔记 第一篇--部署 ActionBarSherlock是JakeWharton编写的一个开源框架,使用这个框架,可以实现在所有的Android ...
- Java学习记录第一章
学习Java第一章的记录,这一章主要记录的是Java的最基础部分的了解知识,了解Java的特性和开发环境还有Java语言的优缺点. 计算机语言的发展大概过程:机器语言--->汇编语言---> ...
- oracle学习笔记第一天
oracle学习笔记第一天 --oracle学习的第一天 --一.几个基础的关键字 1.select select (挑选) 挑选出显示的--列--(可以多列,用“,”隔开,*表示所有列),为一条 ...
- javascript的ES6学习总结(第一部分)
ES6(ESNext学习总结——第一部分) ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版. ECMA每年6月份,发布一个版本 201 ...
- Web基础学习---HTML 第一天
Web基础学习---HTML 第一天 1 HTML标签 2.CSS Web开发基础HTML好吧离开Python几天...如何学好前端?? 多去看别人的网站.多看.多写.多练,(知乎.36Kr.)多练就 ...
- QT学习之第一个程序
QT学习之第一个程序 目录 手动创建主窗口 居中显示 添加窗口图标 显示提示文本 Message Box的应用 手动连接信号与槽 手动创建主窗口 窗口类型 QMainWindow: 可以包含菜单栏.工 ...
- 创芯Xilinx Microblaze 学习系列第一集
创芯Xilinx Microblaze 学习系列第一集 Xilinx ISE Design Suite 13.2 The MicroBlaze™ embedded processor soft cor ...
随机推荐
- springboot https证书配置
如果公司有提供证书如: 拿到证书秘钥可直接在springboot 的配置文件中配置: server.ssl.key-store=classpath:cert.pfx server.ssl.key-st ...
- Powershell如何制定属性并输出
这个标题看着有些云里雾里.... 前一阵,群里有个朋友问博主“我想把所有用户的SMTP地址全部输出到CSV文件中进行统计,但是SMTP地址似乎输出的是错误的,可在shell里看输出的内容是正确的阿” ...
- tf.train.AdamOptimizer 优化器
adaptive moment estimation(自适应矩估计) tf.train.AdamOptimizer( learning_rate=0.001, beta1=0.9, beta2=0.9 ...
- Netty:ChannelFuture
上一篇我们完成了对Channel的学习,这一篇让我们来学习一下ChannelFuture. ChannelFuture的简介 ChannelFuture是Channel异步IO操作的结果. Netty ...
- Error: opening registry key 'Software\JavaSoft\Java Runtime Environment' could not find java.dll
Error: opening registry key 'Software\JavaSoft\Java Runtime Environment'Error: could not find java.d ...
- AJ学IOS 之微博项目实战(3)微博主框架-UIImage防止iOS7之后自动渲染_定义分类
AJ分享,必须精品 一:效果对比 当我们设置tabBarController的tabBarItem.image的时候,默认情况下会出现图片变成蓝色的效果,这是因为ios7之后会对图片自动渲染成蓝色 代 ...
- 恶劣的网络环境下,Netty是如何处理写事件的?
更多技术分享可关注我 前言 前面,在Netty在接收完新连接后,默认为何要为其注册读事件,其处理I/O事件的优先级是什么?这篇文章,分析到了Netty处理I/O事件的优先级——读事件优先,写事件仅仅是 ...
- stand up meeting 1/11/2016
part 组员 工作 工作耗时/h 明日计划 工作耗时/h UI 冯晓云 跑通打印机功能,尝试与pdf读取部分结合;生词本卡片选择简略释义 ...
- 最后の冲刺 for Alpha release 12/15/2015
好开心啊,又吃成长快乐了~ 据说release前一天,团队的工作效率会达到顶峰.亲证无效!!! release当天才是团队智力效力能力的巅峰好不好?!因为,今天,plan B:福昕pdf reader ...
- stand up meeting 11/19/2015
队员 今日工作 工作耗时/h 明日计划 计划耗时/h 冯晓云 利用昨天编写的调用必应词典API的DLL,完成了UWP版本查词APP的试水,证实了DLL可调和在线查词的可行性:和其他部分的同学就接口数据 ...