bootstrap基础学习一篇
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap基础学习一篇相关的知识，希望对你有一定的参考价值。
这里，主要讲解bootstrap3。关于他的介绍就不用复述了。
1.示例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <title>bootstrap-1</title> <link rel="stylesheet" href="../css/bootstrap.css"> <link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/bootstrap-theme.css"> <link rel="stylesheet" href="../css/bootstrap-theme.min.css"> </head> <body> <h1>你好，世界！</h1> <script src="../js/bootstrap.js"></script> <script src="../js/bootstrap.min.js"></script> </body> </html>
a.先要下载,对应版本的bootstrap文件。
b.<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
c.正确引用，css,js文件。
2.响应式图片
<img src="../img/a.jpg" class="img-responsive" alt="响应式图像" />
老版本：我们必须定义图片的width，height等。
我们现在看看 class=“img-responsive”的样式
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; }
3.容器（container）
<div class="container"> ... </div>
看看class="container"的css样式
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
以上是关于bootstrap基础学习一篇的主要内容，如果未能解决你的问题，请参考以下文章