bootstrap学习笔记<一>(bootstrap用法)
首先引入bootstrap官网链接:http://www.bootcss.com/
bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#download
bootstrap的CDN链接:
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
使用bootstrap的基本模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
分步解析bootstrap模板
<!--网页编码格式-->
<meta charset="utf-8">
<!--在IE运行最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--初始化移动设备浏览显示-->
<!--width=device-width宽度等于设备宽度-->
<!--initial-scale=1初始缩放比例为1-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--这一块是对IE8和9的一些支持-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
最后注意:
一般css放在head中,jQuery的引用和js文件放在body的最下面。
bootstrap学习笔记<一>(bootstrap用法)的更多相关文章
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Bootstrap学习笔记系列1-------Bootstrap网格系统
Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- Bootstrap学习笔记博客
本片博客用于记录之后要用到Bootstrap的学习笔记 概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...
- bootstrap学习笔记--bootstrap安装环境
Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...
随机推荐
- ectouch第二讲之 文件结构
相信大家在ectouch官网都注意到了,ectouch采用的MVC框架,之前一直以为它用的和ecshop一样都是smarty,本鸟默默按照smarty的文件结构研究了好几天,结果是各种文件对不上号.无 ...
- Java JDBC 驱动 MySQL
MySQL: 1>下载地址:http://www.mysql.com/products/connector/ 2> //jdbc:[数据库类型]://[ip地址]:[端口号]/[数据库名] ...
- java 判断某一天是当年的哪一天
题目:输入年份,月份,日,判断这一天是这一年的第几天?(闰年的2月份为29天,平年为28天) public class Runnian { /** * 能被4整除且不能被100整除或者能被400整除的 ...
- 获取SqlServer2005表结构(字段,主键,外键,递增,描述)
1.获取表的基本字段属性 --获取SqlServer中表结构 SELECT syscolumns.name,systypes.name,syscolumns.isnullable, syscolumn ...
- 【转】去掉eclipse的validate
转载地址:http://www.blogjava.net/leisure/archive/2013/01/11/394087.html 困扰了好几天,与大家共享 1,在project名称上右键选择pr ...
- Resolving failed: Temporary failure in name resolution 错误解决方法
首先,检查自己的服务器是否配置了DNS: 其次,在确认了自己已经配置了DNS后,并且域名解析已经正常的情况下,还有上面的问题,接下来就是重启自己的web服务器.比如,apache,nginx等. ...
- java初学。加载图片
public class GameFrame extends Frame{ private static final int WIDTH=900; private static final int H ...
- 查询SQL 对象及存储过程
select * from database..sysobjects order by name EXEC Sp_HelpText 'Proc_Export268';
- 解决CentOS下man 命令,没有帮助信息
Cannot open the message catalog "man" for locale "zh_CN.UTF-8" (NLSPATH="/u ...
- Robotium中定位Android客户端疑难元素
对于没有id,没有text,只有一个图标的疑难元素(ImageView),应该如何定位呢?拿人人网个人主页的设置按钮举例: 我最终是通过定位页面上可以定位到的其他元素,然后通过其他元素与疑难元素相对坐 ...