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再次回顾认识到的东西的更多相关文章

  1. ln 软链接与硬链接的区别再次回顾

    以下是整理的笔记 软硬链接区别 硬链接 软链接 文件有相同的 inode 及 data block 是另一个文件 只能对已存在的文件进行创建 可以对不存在的文件进行创建 不能交叉文件系统进行硬链接的创 ...

  2. php session的存放目录,再次回顾

    session的存放位置可以通过运行时配置ini_set和函数session_save_path来设置 .session_save_path - 读取/设置当前会话的保存路径 string sessi ...

  3. 关于Unsupported major.minor version 52.0解决办法(再次回顾)

    对于web项目的配置问题,在很大程度上,tomcat的版本问题起到很大的决定性因素,例如以上问题:Unsupported major.minor version 52.0 表示stanford par ...

  4. 使用RequireJs和Bootstrap模态框实现表单提交

    下面我将使用requirejs结合模态框实现三五行代码部署表单提交操作. 传统开发思路如下:

  5. <<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫

    并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/he ...

  6. bootstrap模态对话框

    bootstrap模态对话框 前提是引入bootstrap的css和js的东西 data-backdrop="static"代表的是点击旁边的内容,不进行关闭操作,但是esc的时候 ...

  7. C++回顾day03---<多态>

    一:错误理解下的多态 #include <iostream> using namespace std; class Parent { public: Parent() { cout < ...

  8. 揭秘PHP深受Web开发者喜爱的原因

    我们再次回顾一下在软件开发的发展中非常有名的技术"PHP"(Hypertext Pre-Processor),它是由Rasmus Lerdorf在1995年发明的.开始阶段,PHP ...

  9. 3 - 基于ELK的ElasticSearch 7.8.x技术整理 - 高级篇（ 偏理论 ）

    4.ES高级篇 4.1.集群部署 集群的意思:就是将多个节点归为一体罢了( 这个整体就有一个指定的名字了 ) 4.1.1.window中部署集群 - 了解即可 把下载好的window版的ES中的dat ...

随机推荐

  1. python2.7练习小例子（十三）

        13):题目:将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5.     程序分析:对n进行分解质因数,应先找到一个最小的质数k,然后按下述步骤完成.(1)如果这个质数恰等于 ...

  2. ORACLE中order by造成分页不正确原因分析

     工作中遇到的问题: 为调用方提供一个分页接口时,调用方一直反应有部分数据取不到,且取到的数据有重复的内容,于是我按以下步骤排查了下错误. 1.检查分页页码生成规则是否正确. 2.检查SQL语句是否正 ...

  3. P2419 [USACO08JAN]牛大赛Cow Contest

    P2419 [USACO08JAN]牛大赛Cow Contest 题目背景 [Usaco2008 Jan] 题目描述 N (1 ≤ N ≤ 100) cows, conveniently number ...

  4. sql插入查询出的数据，主键递增

    INSERT INTO C_DPRECORD SELECT (SEQ_C_DPRECORD.NEXTVAL ) AS ID, DEV_ID, DEV_CHNNUM, DEV_NAME, DEV_CHN ...

  5. 【连载】Maven系列（三） 进阶

    相关文章: 1.<用起来超爽的Maven——入门篇> 2.<用起来超爽的Maven——进阶篇> 一.Maven坐标: Maven世界拥有大量需要构建jar文件,我们需要找一个用 ...

  6. 分分钟搞定redis

    随着科技不断的发展,使用到的技术也是更新换代,大家都知道当一个程序用户量上来之后,必然是要做数据缓存的,那么如何去实现的呢,在之前我们一直使用memcache去做数据缓存,现在众所周知主流的缓存技术已 ...

  7. Qt Qwdget 汽车仪表知识点拆解1 速度表示

    先贴上效果图,注意,没有写逻辑,所以这些都是乱动的 这里线主要说一下中间显示速度的显示制作的方式,在这里,自己专门写了一个数字的仪表 考虑的一般的汽车是没有办法把瞬时速度提升到四位数的,所以我这里就放 ...

  8. 《python核心编程第二版》第4章习题

    4–1. Python 对象.与所有 Python 对象有关的三个属性是什么?请简单的

  9. Mysql字符串截取：Left()、Right()、Substring()、Substring_index()

    在实际的项目开发中有时会有对数据库某字段截取部分的需求,这种场景有时直接通过数据库操作来实现比通过代码实现要更方便快捷些, mysql有很多字符串函数可以用来处理这些需求,如Mysql字符串截取总结: ...

  10. bzoj1367 可并堆

    题面 参考:<左偏树的特点及运用--黄河源> 我们将这个数列划为很多个互不相交的区间,每一段区间内的 \(b\) 是相等的,即 \(b[l[i]]=b[l[i]+1]=...=b[r[i] ...