官网: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. ORACLE判断两个日期间隔几个工作日

      CreateTime--2017年9月7日17:14:56 Author:Marydon ORACLE判断两个日期间隔几个工作日 方法:使用存储过程 /** * 判断两个日期间隔几个工作日 */ ...

  2. 【Linux】rmdir命令

    用途 rmdir用于删除空目录 全称 rmdir的全称是:Remove Directory 参数 -p:连同上层空的目录一起删除 案例 现在有文件结构如下 test3 文件夹为空文件夹 test/te ...

  3. Ubuntu开机自动禁用无线网络

    让ubuntu开机自动禁用无线网络. 1.自启动脚本 将下面这条禁用无线网络的命令添加到“启动应用程序“中,这样开机时无线网络就会被自动禁用. dbus-send --system --type=me ...

  4. Sphinx全文检索引擎测试

    数据表 1.documents CREATE TABLE `documents` ( `id` int(13) NOT NULL auto_increment, `group_id` int(11) ...

  5. Linux命令-文件处理命令:ln

    ln -s /etc/issue /tmp/issue.soft 为这个/etc/issue文件创建一个软连接,名称为/tmp/issue.soft(相当于windows里面给/etc/issue文件 ...

  6. Redis总结(五)缓存雪崩和缓存穿透等问题(转载)

    前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhong/category/771056.html .今 ...

  7. C# 中运行exe程序

    private int runProcess(string fileName, string appParam) { int returnValue = -1; try { Process myPro ...

  8. ie,cookie,域名与下划线

    前几天为了开发方便,和一个同事将XX.qq.com的测试站点拆成两个站点,我那个叫XX_hanks.qq.com,进行功能开发,在调试 cookie功能的时候,发现IE下cookie没有记住,用htt ...

  9. RPC服务框架dubbo(二):dubbo支持的注册中心

    Zookeeper 1 优点:支持网络集群 2 缺点:稳定性受限于Zookeeper zookeeper的详细信息看这里:https://www.cnblogs.com/shamo89/tag/Zoo ...

  10. redis基础之订阅发布、主从复制和事务(四)

    前面已经学习了redis的基本的命令行操作和数据类型,下面开始redis一些有趣的功能. 订阅和发布机制 定义:发布者相当于电台,订阅者相当于客户端,客户端发到频道的消息,将会被推送到所有订阅此频道的 ...