bootstrap应用细节-全局 CSS 样式

设置全局 CSS 样式;基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统。

Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。

1、为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

2、在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式看你自己的情况而定!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

3、Normalize.css
为了增强跨浏览器表现的一致性,我们使用了 Normalize.css,这是一个CSS 重置样式库。

4、布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

<div class="container-fluid">
  ...
</div>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,679评论 1 92
  • 什么是 Bootstrap Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap...
    sseakom阅读 4,834评论 3 22
  • 第一章 Bootstrap简介 定义 Bootstrap官网给出的解释是:简洁、直观、强悍、移动设备优先的前端开发...
    lvyweb阅读 5,163评论 1 10
  • 首先在看文章之前,请大家告诉我,你们今天朋友圈是不是看到了大量的“大家好,给大家介绍一下,这是我xxx”的句式。 ...
    SandyC成长记阅读 3,265评论 0 0
  • 首先需要JDK 下载spark 创建安装目录 移动安装文件到新建目录 切换目录 解压 修改配置文件 conf/ 我...
    Albert陈凯阅读 3,130评论 0 0