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基础学习一篇的更多相关文章
- bootstrap基础学习二篇
这篇学习网格系统(Grid System) Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1.网格选项: ...
- bootstrap基础学习五篇
bootstrap表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. < ...
- bootstrap基础学习八篇
bootstrap辅助类 a.对于文本颜色 以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类 描述 .text-muted "text-muted" ...
- bootstrap基础学习七篇
bootstrap图片 Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle ...
- bootstrap基础学习六篇
bootstrap按钮 类 描述 .btn 为按钮添加基本样式 .btn-default 默认/标准按钮 .btn-primary 原始按钮样式(未被操作) .btn-success 表示成功的动作 ...
- bootstrap基础学习四篇
bootstrap代码 Bootstrap 允许两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 < ...
- bootstrap基础学习三篇
bootstrap的排版 1.标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式 2.代码如下: <div class="container"& ...
- bootstrap基础学习十一篇
bootstrap下拉菜单(Dropdowns) 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可. a.代码示例如 ...
- bootstrap基础学习十篇
bootstrap字体图标(Glyphicons) a.什么是字体图标 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目 ...
随机推荐
- CodeForces 2A - Winner（模拟）
题目链接:http://codeforces.com/problemset/problem/2/A A. Winner time limit per test 1 second memory limi ...
- 塔防游戏 代码project as 分享
分享 用到的技术为 1. 先进的下载技术 2. mvc 游戏仅仅实现战斗逻辑功能. 简单的 登陆,及选择关卡,战斗,结算. 五脏俱全,各种游戏模块及分层都划分清楚,仅仅要填代码就能够了 哈哈 能够拿 ...
- linux内核——PAE（物理地址扩展）
引入PAE机制后,分页模式是怎样的呢? 首先,要搞明白几件事,2.6.11以上版本的linux内核中,存在4中页表(页全局目录,页上级目录,页中级目录,页表),这些页表结构是已经存在于硬盘中的,当进程 ...
- 偏最小二乘回归（PLSR）- 1 概览
1. 概览 偏最小二乘算法,因其仅仅利用数据X和Y中部分信息(partial information)来建模,所以得此名字.其总体处理框架体现在下面两图中. 建议先看第2部分,对pls算法有初步了解后 ...
- 最全的iOS物理引擎demo
概述 最全的iOS物理引擎demo,实现重力.碰撞.推力.摆动.碰撞+重力.重力弹跳.仿摩拜单车贴纸效果.防iMessage滚动效果.防百度外卖首页重力感应等效果! 详细 代码下载:http://ww ...
- java的重写、重载、覆盖的差别
多态性 通过继承,一个类能够用作多种类型:能够用作它自己的类型.不论什么基类型,或者在实现接口时用作不论什么接口类型.这称为多态性 重载 每一个类型成员都有一个唯一的签名.方法签名由方法名称和一 ...
- .Net 两大利器Newtonsoft.NET和Dapper
你可以使用ado.net返回的DataTable让Newtonsoft.NET来序列化成Json. 当然你可以使用Dapper返回的List让Newtonsoft.NET来序列化成JSON. 参考资料 ...
- appframework学习--nav的使用说明
app-framework学习--nav的使用说明: 语法: <nav id="mynav" style="background-image:url(../imag ...
- Oracle XE安装具体解释
一.原数据库的卸载 数据库的卸载就不多说了,讲一下过程: 1.运行Oracle Uninstall,卸载Oracle产品 2.删除regedit下的全部Oracle相关 ...
- REST开放接口生成文档工具之apidoc
一.安装node.js环境 感谢阿里云,下载的链接http://npm.taobao.org/mirrors/node/latest-v6.x/ 二.安装apidoc npm install apid ...