bootstrap_第一次使用
来源:互联网 发布:命令与征服 知乎 编辑:程序博客网 时间:2024/04/25 16:22
在网页中使用Bootstrap
我们创建了一个最简单的基本模版
- <!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- Bootstrap -->
- <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
- <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
- <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
- <!--[if lt IE 9]>
- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
- <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
- <![endif]-->
- </head>
- <body>
- <h1>Hello, world!</h1>
- <script src="js/jquery-2.0.3.js"></script>
- <script src="js/bootstrap.min.js"></script>
- </body>
- </html>
1.首先我们可以将Bootstrap的样式文件引用到网页中
- <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
2.如果你需要使用Bootstrap架构提供JavaScript插件的话,那么需要将架构的js文件链接引用到网页中,上面也有提到过JavaScript插件都是依赖与jQuery库的,所以我们当然也需要链接引用jquery的库文件
- <script src="js/jquery-2.0.3.js"></script>
- <script src="js/bootstrap.min.js"></script>
3.viewport的标签,这个标签可以修改在大部分的移动设备上面的显示,为了确保适当的绘制和触屏缩放。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!--[if lt IE 9]>
- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
- <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
- <![endif]-->
意思就是说如果用户IE浏览器的版本小于IE9,那么就会加载这两个js文件库,现在就可以使用这些新的标签,并且可以在这些标签上添加样式了。
就这样我们最简单的Hello World!页面呈现在了大家面前。
总结
在上面我们也启用了响应式的布局。当然有些网站可能并不需要进行响应式的布局,我们就需要进行手动的禁用这个布局,这个文档当中也有详细的说明。
0 0
- bootstrap_第一次使用
- bootstrap_第一次使用
- Bootstrap_为何要使用bttostrap
- Bootstrap_栅栏格
- bootstrap_表单样式控制
- Bootstrap_栅格系统
- Bootstrap_栅格系统
- 第一次使用
- 第一次使用
- 第一次使用
- 第一次使用
- 第一次使用
- 第一次使用
- 第一次使用
- 第一次使用
- 第一次使用
- 第一次使用
- 第一次使用
- 微信公众平台开发(十一) 功能整合
- QT中定义了模版类,在使用该模版类的时候,必须将类cpp文件包含才能编译,不然会报错
- Xml解析方式之Pull解析器的使用
- LeetCode-Single Number
- 微信公众平台开发(十二) 发送客服消息
- bootstrap_第一次使用
- java中的接口
- 统计0到n之间1的个数
- Bootstrap_栅格系统
- 回归
- MAC无法隐藏文件及其扩展
- mac下安装pycurl报错的解决办法
- boostrap文字的设计
- linux patch