bootstrap再次回顾认识到的东西
1,需要使用html5文档类型（Doctype），因此在使用bootstrap项目的开头包含下面的代码段.
<!DOCTYPE html>
<html>
.......
</html>
2,移动设备优先
<meta name="viewport" content="width=device-width,initial-scale=1.0">
width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
注意，这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
3.响应式图像
<img src="..." class="img-responsive" alt="响应式图像">
通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。
接下来让我们看下这个 class 包含了哪些 css 属性。
在下面的代码中，可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
这表明相关的图像呈现为 inline-block。当您把元素的 display 属性设置为 inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。
设置 height:auto，相关元素的高度取决于浏览器。
设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。
使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。
bootstrap再次回顾认识到的东西的更多相关文章
- ln 软链接与硬链接的区别再次回顾
以下是整理的笔记 软硬链接区别 硬链接 软链接 文件有相同的 inode 及 data block 是另一个文件 只能对已存在的文件进行创建 可以对不存在的文件进行创建 不能交叉文件系统进行硬链接的创 ...
- php session的存放目录,再次回顾
session的存放位置可以通过运行时配置ini_set和函数session_save_path来设置 .session_save_path - 读取/设置当前会话的保存路径 string sessi ...
- 关于Unsupported major.minor version 52.0解决办法(再次回顾)
对于web项目的配置问题,在很大程度上,tomcat的版本问题起到很大的决定性因素,例如以上问题:Unsupported major.minor version 52.0 表示stanford par ...
- 使用RequireJs和Bootstrap模态框实现表单提交
下面我将使用requirejs结合模态框实现三五行代码部署表单提交操作. 传统开发思路如下:
- <<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫
并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/he ...
- bootstrap模态对话框
bootstrap模态对话框 前提是引入bootstrap的css和js的东西 data-backdrop="static"代表的是点击旁边的内容,不进行关闭操作,但是esc的时候 ...
- C++回顾day03---<多态>
一:错误理解下的多态 #include <iostream> using namespace std; class Parent { public: Parent() { cout < ...
- 揭秘PHP深受Web开发者喜爱的原因
我们再次回顾一下在软件开发的发展中非常有名的技术"PHP"(Hypertext Pre-Processor),它是由Rasmus Lerdorf在1995年发明的.开始阶段,PHP ...
- 3 - 基于ELK的ElasticSearch 7.8.x技术整理 - 高级篇（ 偏理论 ）
4.ES高级篇 4.1.集群部署 集群的意思:就是将多个节点归为一体罢了( 这个整体就有一个指定的名字了 ) 4.1.1.window中部署集群 - 了解即可 把下载好的window版的ES中的dat ...
随机推荐
- OrCAD把原理图中的器件添加到原理图库
1. 在使用OrCAD的时候,有时需要把别人的原理图里面的器件添加到自己的原理图库,方便以后使用,具体操作如下,依次选择Design Cache---元器件--Copy 2. 选中要存放的原理图库,鼠 ...
- 今天领导分享了一个探测端口的命令-linux下提示bash:command not found
今天领导分享了一个探测端口的命令,于是试了一下,提示未找到-bash: nc: command not found 因此决定将bash的命令在复习一下,温故而知新 总结整理于此: 确定你的DNS可以 ...
- 数据迁移的应用场景与解决方案Hamal
本文来自网易云社区 作者:马进 跑男热播,作为兄弟团忠实粉丝,笔者也是一到周五就如打鸡血乐不思蜀. 看着银幕中一众演员搞怪搞笑的浮夸演技,也时常感慨,这样一部看似简单真情流露的真人秀,必然饱含了许许多 ...
- php 使用GD库压缩图片，添加文字图片水印
先上一个工具类,提供了压缩,添加文字.图片水印等方法: image.class.php <?php class Image { private $info; private $image; pu ...
- unity3d NavMeshAgent 寻路画线/画路径
今天在群里看见有个小伙在问Game视图寻路时怎么画线 正好前几天写了个寻路,而且自己也不知道具体怎么在寻路时画线,所以决定帮帮他,自己也好学习一下 在百度查了一下资料,直接搜寻路画路径.寻路画线... ...
- jmeter实例，如果有说明错误，请各位大神批评
首先我们打开jmeter,今天录制的脚本的是获取QQ头像,找了好久才找到可以免费试用的接口,如果有什么错误的地方,欢迎大家提出来,我会及时修改,也给自己一次进步的机会,希望大家不吝赐教!!!如果有什么 ...
- zabbix 一些问题随记
1. zabbix运行不了,显示被锁,去检查日志中的报错 2. 配置界面,连接不到数据库,检查server配置文件,mysql授权命令要准确,重启 3. 显示没有php文件,下载即可,或者修改网页访问 ...
- Python Flask之旅
<Pyhton Flask之旅> 以前学flask时做的总结,搬运到这里,markdown格式写的有点乱,凑合看吧. 参考博客 http://blog.csdn.net/nunchakus ...
- Ubuntu16.04 + CUDA9.0 + cuDNN7.3 + Tensorflow-gpu-1.12 + Jupyter Notebook 深度学习环境配置
目录 一.Ubuntu16.04 LTS系统的安装 二.设置软件源的国内镜像 1. 设置方法 2.关于ubuntu镜像的小知识 三.Nvidia显卡驱动的安装 1. 首先查看显卡型号和推荐的显卡驱动 ...
- day02 智能合约
上午 1>部署智能合约网络 语法 require 2>利用第三方的节点 同步到以太坊 3>智能合约部署的步骤: 1.查看区块 2.发布合约 deploy后台经历的事情:就是部署合约的 ...