1.Bootstrap-简介
1.介绍
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
2.HTML 模板
一个使用了 Bootstrap 的基本的 HTML 模板如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
3.移动设备优先
width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
user-scalable=no 可以禁用其缩放（zooming）功能。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
注意，这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
4.响应式图像
<img src="..." class="img-responsive" alt="响应式图像">
通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。
1.Bootstrap-简介的更多相关文章
- BootStrap简介及应用要点
BootStrap简介 BootStrap是基于HTML.CSS和JavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架,他是后端程序员的福音,使他们只需要专注业务逻辑 ...
- 第一章 Bootstrap简介
一.Bootstrap简介 Bootstrap是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jaco ...
- Bootstrap学习（一）：Bootstrap简介
一.Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更 ...
- 第一章Bootstrap简介
一.Bootstrap简介 Bootstrap是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jaco ...
- 1.Bootstrap简介
Bootstrap简介 BootstrapAPI: https://v3.bootcss.com Bootstrap优点: 响应式布局,一个框架,多种设备适用 Bootstrap 是最受欢迎的 HTM ...
- Bootstrap简介及安装使用
Bootstrap 简介 什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的 ...
- webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部署
本文为大家讲解的是webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部属,感兴趣的同学参考下 ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端a ...
- Bootstrap 简介: 创建响应式、移动项目的工具
原文链接: Introduction to Bootstrap: A Tool for Building Responsive, Mobile-First Projects 下载: 示例代码Boots ...
- Bootstrap 简介(Web前端CSS框架)
目录1.简介2.特点3.组件4.Javascript插件5.定制自己的框架代码6.Bootstrap Less 1.简介Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Tw ...
- Bootstrap 简介
一.Bootstrap介绍 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.本课时讲解 Bootstrap 的概念,并介绍 Boo ...
随机推荐
- Kotlin代理属性--官方文档翻译
代理属性 Delegated Properties 本文为个人翻译的Kotlin官方文档, 原文连接: Delegated Properties 一些特定的常见类型的属性, 尽管我们可以在每次需要的时 ...
- @Autowired和@Resource的区别是什么？
@Autowired 与@Resource: 1.@Autowired与@Resource都可以用来装配bean. 都可以写在字段上,或写在setter方法上. 2.@Autowired默认按类型装配 ...
- mapper.xml是怎样实现Dao层接口
上午写了一个简单的 从xml读取信息实例化一个Bean对象.下午就开始想mybatis是怎么通过xml文件来实现dao层接口的,一开始想直接用Class.forName(String name)然后调 ...
- mysql的索引问题分析
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; color: #454545 } span. ...
- py2 HTMLTestRunner报告
直接上代码吧. #coding:utf-8 #__author__ = 'carry' import unittest,HTMLTestRunner class Hello(unittest.Test ...
- 原创： rsync软件服务利用ansible实现一键化部署
---恢复内容开始--- 首先创建一个脚本文件 /server/tools/peizhi.sh cat /server/tools/peizhi.sh cat >>/etc/rsyncd ...
- Java中常见数据结构Set之HashSet
今天来说说Java集合中的Set系列之HashSet. Set我们众所周知的就是虑重功能, 我们平时在项目开发中也常用到这个特性的.那么Set为何能够虑重呢? 接下来我们就看下源码吧. Set ...
- asp.net core 2.0 web api基于JWT自定义策略授权
JWT(json web token)是一种基于json的身份验证机制,流程如下: 通过登录,来获取Token,再在之后每次请求的Header中追加Authorization为Token的凭据,服务端 ...
- Rsync for windows
说到电脑,我真是一屋子都是. 从房间到大厅,就已经有5台.这还没包括服务器. 虽然这5台电脑我最常用的也只是2~3台.其他的不是给朋友们来坐的时候打打游戏.就是给妈妈上网看看报纸. 不过我相信很多朋友 ...
- Adobe Flash Player 因过期而遭遇阻止怎么办
百度搜索"adobe flash player ppapi "并找到搜索结果中包含www.adobe.com的网址进行在线下载安装即可搞定这个问题[注意要对应你电脑系统中的浏览器, ...