bootstrap使用基础
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有
<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使用基础的更多相关文章
- 【BootStrap】 基础
[BootStrap] 基础 一. 自适应(针对不同设备如手机平板笔电,使页面的宽度适应设备宽度) <meta name="viewport" content="w ...
- 在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端
基于Metronic的Bootstrap开发框架是我们稍早一点的框架产品,界面部分采用较新的Bootstrap技术,框架后台数据库支持Oracle.SqlServer.MySql.PostgreSQL ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
- 《玩转Bootstrap(基础)》笔记
基本的HTML模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 【SSM之旅】Spring+SpringMVC+MyBatis+Bootstrap整合基础篇(一)项目简介及技术选型相关介绍
试水 一直想去搭建个自己的个人博客,苦于自己的技术有限,然后也个人也比较懒散.想动而不能动,想动而懒得动,就这么一直拖到了现在.总觉得应该把这几年来的所学总结一番,这样才能有所成长. 不知在何时,那就 ...
- 玩转Bootstrap(基础) -- (6.导航条基础)
1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- 第三篇bootstrap 网格基础
Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 网格系统类似一个表格,有行和列,它必须放置在一个类型设置为c ...
- Bootstrap框架(基础篇)
本文引用慕课网http://www.imooc.com/learn/141 作者大漠 讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...
- Bootstrap框架基础
特点:写非常少的代码 即可实现多终端的页面适配 ☑ 简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集. ☑ 基于html5.css3的bootstrap,具 ...
随机推荐
- 02-05:springboot文件的上传
1.在static 下建立upload.html文件 <!DOCTYPE html> <html> <head> <meta charset="UT ...
- c# winform as3相互调用
C#主要代码: 首先要添加COM组件-Shockwave Flash Object //接收flash发送过来的信息 private void axShockwaveFlash1_Fla ...
- Android_触摸事件传递机制
Android中dispatchTouchEvent,onInterceptTouchEvent, onTouchEvent的理解ecandroid中的事件类型分为按键事件和屏幕触摸事件,Touch事 ...
- PPT-常用快捷键
Ctrl+Shift+C 复制文本格式 Ctrl+Shift+V 粘贴文本格式 Ctrl+B 应用粗体格式Ctrl+U 应用下划线Ctrl+l 应用斜体格式 全选 Ctrl + A 光标之后 ...
- windows平台安装php_memcache模块
要求 必备知识 熟悉基本编程环境搭建. 运行环境 windows 7(64位);php-5.3; memcached-1.2.6 下载地址 环境下载 什么是PHP Memcache模块 Memcach ...
- PHP多进程系列笔记(一)
本系列文章将向大家讲解pcntl_*系列函数,从而更深入的理解进程相关知识. PCNTL在PHP中进程控制支持默认是关闭的.您需要使用 --enable-pcntl 配置选项重新编译PHP的 CGI或 ...
- JavaServer Faces生命周期概述
JavaServer Faces应用程序的生命周期在客户端为页面发出HTTP请求时开始,并在服务器响应该页面并转换为HTML时结束. 生命周期可以分为两个主要阶段:执行和渲染.执行阶段进一步分为子阶段 ...
- SPI(Service Provider Interface)机制
JAVA SPI 约定如下:当服务的提供者提供了服务接口的一种实现之后,在jar包的META-INF/services/ 目录中同时创建一个以服务接口命名的文件,该文件中的内容就是实现该服务接口的具体 ...
- 面试:C++String类实现
#include <iostream> #include <cstring> using namespace std; class CString { private: cha ...
- redis学习(五) redis过期时间
redis过期时间 1.redis过期时间介绍 有时候我们并不希望redis的key一直存在.例如缓存,验证码等数据,我们希望它们能在一定时间内自动的被销毁.redis提供了一些命令,能够让我们对ke ...