官网：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. UNIX网络编程卷2进程间通信读书笔记（二）—管道 （1）

    一．管道 管道的名称很形象,它就像是一个水管,我们从一端到水然后水从令一端流出.不同的是这里说的管道的两边都是进程.从一端往管道里写数据,其它进程可以从管道的另一端的把数据读出,从而实现了进程间通信的 ...

  2. 【Django】pip 安装和卸载 Django

    1.在dos命令中输入pip进行安装 注意:如果提示('pip' 不是内部或外部命令,也不是可运行的程序或批处理文件.) 那么先将pip添加到环境变量中,pip路径一般在python的安装路径下,例如 ...

  3. 【Linux】less命令

    用途 less主要用于查看档案内容,与more的功能一致,但是比more更强大 全称 less的全称就为less 说明 空格键 :代表向下翻一页 pagedown : 代表向下翻一页 pageup:向 ...

  4. Java中try catch finally的执行顺序问题

    finally 语句块是在 try 或者 catch 中的 return 语句之前执行的.更加一般的说法是,finally 语句块应该是在控制转移语句之前执行,控制转移语句除了 return 外,还有 ...

  5. Linux命令-压缩解压命令:tar

    tar [选项] [打包后文件名] [打包前的文件或者目录名称] -c表示创建(create-创建) -z表示压缩(gzip-压缩) -j表示压缩(bzip2-压缩) -v显示进度(verbose-冗 ...

  6. mosquitto --- 单向认证

    1.生成证书要单向配置SSL 需要 做三项前置工作 1. 生成CA证书 2.生成server 端证书,server 端key github 的一个开源项目已经做到这点 ,详情可见 https://gi ...

  7. 类声明、类作用域、前向声明、this指针、嵌套类、PIMPL 技法 等

    一.类声明 //类是一种用户自定义类型,声明形式: class 类名称 {    public:              公有成员(外部接口)    private:              私有 ...

  8. Android Context原理与使用的总结

    一.Context继承体系 与 Context是怎样创建的 1. Context继承体系 仅仅用记住一句:Activity . Service 与Application 都是继承自ContextWra ...

  9. 分布式ID生成方案

    系统唯一ID是设计一个系统的时候常常会遇到的问题,也常常为这个问题而纠结. 生成ID的方法有很多,适应不同的场景.需求以及性能要求.所以有些比较复杂的系统会有多个ID生成的策略. 0. 分布式ID要求 ...

  10. Atitit.软件gui按钮and面板---os区-----linux windows搜索文件 文件夹

    Atitit.软件gui按钮and面板---os区-----搜索文件 1. Find 1 2. 寻找目录 1 3. 2. Locate// everything 1 4. 3. Whereis (wi ...