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 需要商业许可,但是您可以通过基于项目 ...
随机推荐
- Java设计模式—工厂设计模式
工厂设计模式(减少耦合.通过接口或者工厂类来实现) 耦合性:粘度强(依耐性) Person p = new Person(); //耦合性强 Man p = new Per ...
- JavaScript ,Css and Jquery In OpenERP 7.0
From: http://openerpbay.blogspot.jp/2013/02/javascript-css-and-jquery-in-openerp-70.html Hi fellows, ...
- 如何下载flash离线安装包
如何下载flash离线安装包 CreateTime--2018年4月14日16:02:13 Author:Marydon 1.下载地址 UpdateTime--2018年5月13日16点55分 p ...
- apk签名相关文章
签名详解:https://stackoverflow.com/questions/4245303/android-sf-file 使用不同的keystore,签名后生成SF文件一模一样正常吗? 正常 ...
- PHP-静态方法(static)继承等分析
<?php class A { const CONST_NAME = 'A'; public static $static_name = 'A'; public static $static_n ...
- mysql优化一
1.show global status 可以列出MySQL服务器运行各种状态值 2.show variables 查询MySQL服务器配置信息 一.慢查询 mysql ...
- poj 1236 Network of Schools 【Tarjan】
题目链接:http://poj.org/problem?id=1236 题意: 本题为有向图. 需解决两个问题: 1 须要给多少个点,才干传遍全部点. 2 加多少条边,使得整个图变得强连通. 使用Ta ...
- TensorFlow 简单实例
TF 手写体识别简单实例: TensorFlow很适合用来进行大规模的数值计算,其中也包括实现和训练深度神经网络模型.下面将介绍TensorFlow中模型的基本组成部分,同时将构建一个CNN模型来对M ...
- 关闭windows打印服务
1.关闭打印服务:开始-运行-services.msc或打开控制面板-管理工具-服务,打开服务列表,找到Print Spooler(打印服务),关闭(右击,点“关闭”).2.删除打印缓存:进入c:\\ ...
- spring boot test中mockito的运用
mock的意义 在微服务盛行的当下,开发过程中往往出现A应用中某功能的实现需要调用B应用的接口,无论使用RPC还是restful都需要B应用提供接口的实现整个开发工作才能继续进行.从而导致A应用的开发 ...