官网：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基础学习一篇的更多相关文章

  1. bootstrap基础学习二篇

    这篇学习网格系统(Grid System) Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1.网格选项: ...

  2. bootstrap基础学习五篇

    bootstrap表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. < ...

  3. bootstrap基础学习八篇

    bootstrap辅助类 a.对于文本颜色 以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类 描述 .text-muted "text-muted" ...

  4. bootstrap基础学习七篇

    bootstrap图片 Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle ...

  5. bootstrap基础学习六篇

    bootstrap按钮 类 描述 .btn 为按钮添加基本样式 .btn-default 默认/标准按钮 .btn-primary 原始按钮样式(未被操作) .btn-success 表示成功的动作 ...

  6. bootstrap基础学习四篇

    bootstrap代码 Bootstrap 允许两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 < ...

  7. bootstrap基础学习三篇

    bootstrap的排版 1.标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式 2.代码如下: <div class="container"& ...

  8. bootstrap基础学习十一篇

    bootstrap下拉菜单(Dropdowns) 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可. a.代码示例如 ...

  9. bootstrap基础学习十篇

    bootstrap字体图标(Glyphicons) a.什么是字体图标 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目 ...

随机推荐

  1. 【BIRT】交叉报表中出现空值设置为默认值

    在使用BIRT做交叉报表的时候,往往会出现有些维度下的值是空值,例如如下报表: 那么我们可以为这些空值给出默认值,例如"-" 具体操作如下: 点击上图的[Cross Tab]后选中 ...

  2. 纯css实现单行”截取“

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. MySQL数据库字符集由utf8修改为utf8mb4一例

    对于mysql 5.5 而言,如果不设定字符集,mysql默认的字符集是 latin1 拉丁文字符集: 为了统一管理和应用开发的方便,一般都会统一将操作系统,客户端,数据库各方面的字符集都设置为 ut ...

  4. /usr/lib64改名字风波

    注:本文描述请勿模仿,仅限万一遇到这种情况一试. 一不小心做了一个操作: cd /usr mv lib64 lib64-bak 然后奇异的发现: cp不能用了!ls也不能用了…… 提示信息如下: -b ...

  5. windows环境安装tensorflow

    本机环境win7,想要安装tensorflow,试了好久,才装好.官网才是王道. 注意:目前tensorflow 在 windows 环境中仅支持 python 3.5. *64,.所以python版 ...

  6. Linux find 命令概览

    Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.由于find具有强大的功能,所以它的选项也很多,其中大部分选项都值得我们花时 ...

  7. 怎么使用Firefox的RestClient

  8. 揭开Altera公司支持OpenCL的设计工具的神秘面纱

    将程序中处理负荷较大的工作分配给加速器LSI的“异构计算(Heterogeneous Computing)”将踏出崭新的一步.美国Altera公司将于2013年内开始面向普通用户提供可自动由按照异构计 ...

  9. netty内存泄漏

    关于netty本身内存泄漏的资料,在此记录一下:https://blog.csdn.net/hannuotayouxi/article/details/78827499

  10. Makefile 使用小结

    Makefile的基本格式 #目标:依赖(条件) # 命令 #all: add.c sub.c dive.c mul.c main.c # gcc add.c sub.c div.c mul.c ma ...