1.为了适应跨屏浏览,Bootstrap为单元格预定义了4种class ,分别对应于手机、ipad、笔记本电脑、台式机。

<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
lg=4 md=4 sm=12 xs=12
</div>
</div>
依次是大,中,小,更小
2.bootstrap v4没有fonts文件 v3有
 3.为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:
<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 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

注意,这种方式我们并不推荐所有网站使用,还是要看您自己的情况而定!

 

bootstrap使用基础的更多相关文章

  1. 【BootStrap】 基础

    [BootStrap] 基础 一. 自适应(针对不同设备如手机平板笔电,使页面的宽度适应设备宽度) <meta name="viewport" content="w ...

  2. 在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端

    基于Metronic的Bootstrap开发框架是我们稍早一点的框架产品,界面部分采用较新的Bootstrap技术,框架后台数据库支持Oracle.SqlServer.MySql.PostgreSQL ...

  3. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  4. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  5. 《玩转Bootstrap(基础)》笔记

    基本的HTML模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. 【SSM之旅】Spring+SpringMVC+MyBatis+Bootstrap整合基础篇(一)项目简介及技术选型相关介绍

    试水 一直想去搭建个自己的个人博客,苦于自己的技术有限,然后也个人也比较懒散.想动而不能动,想动而懒得动,就这么一直拖到了现在.总觉得应该把这几年来的所学总结一番,这样才能有所成长. 不知在何时,那就 ...

  7. 玩转Bootstrap(基础) -- (6.导航条基础)

    1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  8. 第三篇bootstrap 网格基础

    Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 网格系统类似一个表格,有行和列,它必须放置在一个类型设置为c ...

  9. Bootstrap框架(基础篇)

    本文引用慕课网http://www.imooc.com/learn/141  作者大漠  讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...

  10. Bootstrap框架基础

    特点:写非常少的代码 即可实现多终端的页面适配 ☑  简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集. ☑  基于html5.css3的bootstrap,具 ...

随机推荐

  1. Android 开发服务类 05_ ApkPatchDemo

    APP 增量更新服务端[https://github.com/cundong/SmartAppUpdates] import com.cundong.common.Constants; import ...

  2. spring security xml配置详解

    security 3.x <?xml version="1.0" encoding="UTF-8"?> <beans:beans xmlns= ...

  3. spring boot 与 thymeleaf (1): 国际化

    在thymeleaf 里面有个消息表达式: #{...} , 可以借此来实现国际化. 在我使用这个功能的时候, 碰到了一个问题, 按照 JavaEE开发的颠覆者 Spring Boot实战  上面编码 ...

  4. ActiveMQ——activemq的使用java代码实例(精选)

    ActiveMQ 在java中的使用,通过单例模式.工厂实现 Jms规范里的两种message传输方式Topic和Queue,两者的对比如下表():   Topic Queue 概要 Publish  ...

  5. T-SQL触发器,限制一次只能删除一条数据

    /****** Object: Trigger [dbo].[trg_del] Script Date: 01/01/2016 12:58:28 ******/ SET ANSI_NULLS ON G ...

  6. redis学习(七)redis主从复制

    redis主从复制 1.redis主从复制的作用 redis的定位是一个高可用的数据服务器,可是在实际生产环境下,单机的redis服务器是无法满足真正意义上的高可用性的. 第一,单机的redis服务器 ...

  7. 软件架构设计学习总结(19):详解分布式系统中的session同步问题

    几周前,有个盆友问老王,说现在有多台服务器,怎么样来解决这些服务器间的session同步问题?老王一下就来精神了,因为在n年以前,老王还在学校和几个同学一起所谓创业的时候,也遇到了类似的问题.当时查了 ...

  8. 更改导入项目时weblogic运行库

    1.在项目上点击右键->Properties->Server->选择weblogic的server->点击Apply按钮:2.在项目上点击右键->Properties-& ...

  9. localStorage存储对象,sessionStorage存储数组对象

    前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个 ...

  10. 出现HTTP 错误 404.0 - Not Found的解决方法

    1.修改配置文件<system.webServer><modules runAllManagedModulesForAllRequests="true" /> ...