HTML与BootStrap基本结构示例
2015-12-03 10:39
543 查看
The latest design and development standards:
Using an HTML5 doctypeForcing Internet Explorer to use its latest rendering mode
And, utilizing the viewport meta tag.
什么是Viewport ?
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。
0x00 HTML 基本结构
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> </head> <body> <h1>Hello, world!</h1> </body> </html>
0x01 BootStrap基本结构
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css"> </head> <body> <h1>Hello, world!</h1> <!-- jQuery first, then Bootstrap JS. --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> </body> </html>
相关文章推荐
- 页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理
- Bootstrap导航条
- 全面解析Bootstrap图片轮播效果
- bootstrap提供了六种列表效果
- bootstrap提供了六种列表效果
- 全面解析Bootstrap图片轮播效果
- Bootstrap历练实例:响应式导航
- Bootstrap Carousel
- Bootstrap3 - Using glyphicon as background image in CSS
- bootstrap快速链接
- 解决bootstrap中轮播插件支持手机上的手势滑动的问题
- Bootstrap_排版
- debootstrap 配置
- Bootstrap的Modal源码学习
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- Bootstrap导航条navbar
- bootstrap中的媒体对象
- bootstrap中的媒体对象
- Java全新高大尚HTML5 bootstrap后台框架
- Bootstrap框架分分钟解决响应式导航(直接上代码)