bootstrap基础学习一篇

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了bootstrap基础学习一篇相关的知识,希望对你有一定的参考价值。

官网:http://www.bootcss.com/

这里,主要讲解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基础学习一篇的主要内容,如果未能解决你的问题,请参考以下文章

bootstrap基础学习五篇

bootstrap基础学习三篇

bootstrap table怎么用

bootstrap table怎么控制表格显示

Bootstrap基础学习01 Bootstarp的CSS

Bootstrap基础学习