bootstrap慕课网笔记 bootstrap入门
2015-11-19 19:36
681 查看
http://www.imooc.com/video/3341慕课网视频链接
一、bootstrap结构
bootstrap/
-----css/
-------bootstrap.css
-------bootstrap.min.css
-------bootstrap.theme.css
-------bootstrap.theme.min.css
-----js/
-------bootstrap.js
-------bootstrap.min.js
-----fonts/
-------glyphicons-halflings-regular.eot
-------glyphicons-halflings-regular.svg
-------glyphicons-halflings-regular.woff
bootstrap的js插件依赖于jQuery，因此jQuery要在bootstrap之前引用
把css放在head中，把 js 放在body的最下面
二、标准模板
——首先是html5的定义
——页面utf-8编码
——bootstrap不支持IE的兼容模式（在IE中运行最新的渲染模式）
——viewport初始化移动浏览显示，宽度是设备宽度，设置初始载入缩放比例为1，不缩放=视口的宽度等于物理上真实的分辨率
——载入bootstrap的css样式
——IE版本低于IE9，引入2个js，一个让IE8支持html5标签，一个支持媒体查询（html5shiv.js的作用是 让IE6-8识别html5新元素
html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。）
——加入jQuery和Bootstrap
标准模板
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING:Respond.js doesn't work if you view the page via file:// -->
<!--[ if It IE 9 ]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![ endif ]-->
</head>
<body>
<h1>Hello World ! </h1>
<!--jQuery(necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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中的css
bootstrap是移动设备优先的，针对移动设备的样式融合进了框架的每个角落，可以实现漂亮的响应式布局
初始化样式使用的Normalize.css
Grid system 栅格结构（最多12列）
工作原理：
1、行必须包含在container容器中，只有列可以作为行的直接子元素，内容放在列中。
2、通过设置padding ，设定列与列的间隔
3、为第一和最后一列设置 负值的margin从而抵消掉padding的影响
4、列通过1~12 的值表示其跨越的范围
5、class在屏幕屏幕大于等于阈值的设备上起作用，并针对小屏幕设置的class覆盖掉
6、对各种不同屏幕的分辨率设置了不同的class，达到不同的显示效果。
7、table样式，边框条纹鼠标变色。。
四、bootstrap中的组件 （glyphs）
包含很多可以复用的组件，图标、下拉菜单、导航、警告框、弹出框等。
五、bootstrap中的JavaScript插件
bootstrap中包含一系列的jQuery插件，可以简单一次性引入所有插件，或者单个引入页面中来
引入bootstrap.js 或 bootstrap.min.js
以tooltip.js为例设置 Data 属性
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="left" title="Tooltip on left">Tooltip on left</button>
可以用$('#example').tooltip(options)设置tooltip的配置项
六、定制bootstrap
通过自定义bootstrap组件，less变量和jQuery插件，可以定制一份属于自己的bootstrap版本
一、bootstrap结构
bootstrap/
-----css/
-------bootstrap.css
-------bootstrap.min.css
-------bootstrap.theme.css
-------bootstrap.theme.min.css
-----js/
-------bootstrap.js
-------bootstrap.min.js
-----fonts/
-------glyphicons-halflings-regular.eot
-------glyphicons-halflings-regular.svg
-------glyphicons-halflings-regular.woff
bootstrap的js插件依赖于jQuery，因此jQuery要在bootstrap之前引用
把css放在head中，把 js 放在body的最下面
二、标准模板
——首先是html5的定义
——页面utf-8编码
——bootstrap不支持IE的兼容模式（在IE中运行最新的渲染模式）
——viewport初始化移动浏览显示，宽度是设备宽度，设置初始载入缩放比例为1，不缩放=视口的宽度等于物理上真实的分辨率
——载入bootstrap的css样式
——IE版本低于IE9，引入2个js，一个让IE8支持html5标签，一个支持媒体查询（html5shiv.js的作用是 让IE6-8识别html5新元素
html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。）
——加入jQuery和Bootstrap
标准模板
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING:Respond.js doesn't work if you view the page via file:// -->
<!--[ if It IE 9 ]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![ endif ]-->
</head>
<body>
<h1>Hello World ! </h1>
<!--jQuery(necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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中的css
bootstrap是移动设备优先的，针对移动设备的样式融合进了框架的每个角落，可以实现漂亮的响应式布局
初始化样式使用的Normalize.css
Grid system 栅格结构（最多12列）
工作原理：
1、行必须包含在container容器中，只有列可以作为行的直接子元素，内容放在列中。
2、通过设置padding ，设定列与列的间隔
3、为第一和最后一列设置 负值的margin从而抵消掉padding的影响
4、列通过1~12 的值表示其跨越的范围
5、class在屏幕屏幕大于等于阈值的设备上起作用，并针对小屏幕设置的class覆盖掉
6、对各种不同屏幕的分辨率设置了不同的class，达到不同的显示效果。
7、table样式，边框条纹鼠标变色。。
四、bootstrap中的组件 （glyphs）
包含很多可以复用的组件，图标、下拉菜单、导航、警告框、弹出框等。
五、bootstrap中的JavaScript插件
bootstrap中包含一系列的jQuery插件，可以简单一次性引入所有插件，或者单个引入页面中来
引入bootstrap.js 或 bootstrap.min.js
以tooltip.js为例设置 Data 属性
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="left" title="Tooltip on left">Tooltip on left</button>
可以用$('#example').tooltip(options)设置tooltip的配置项
六、定制bootstrap
通过自定义bootstrap组件，less变量和jQuery插件，可以定制一份属于自己的bootstrap版本
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布，Web 前端 UI 框架
- angular 指令简述
- Bootstrap每天必学之前端开发框架
- 基于Bootstrap的网页设计实例
- 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
- 全系IE支持Bootstrap的解决方法
- BootStrap实现带有增删改查功能的表格(DEMO详解)
- 通过Tabs方法基于easyUI+bootstrap制作工作站
- BootStrap栅格系统、表单样式与按钮样式源码解析
- jfinal与bootstrap的登录跳转实战演习
- angularJS与bootstrap结合实现动态加载弹出提示内容
- bootstrap data与jquery .data
- Bootstrap的图片轮播示例代码
- 解决bootstrap中modal遇到Esc键无法关闭页面
- Bootstrap每天必学之简单入门
- 基于Bootstrap+jQuery.validate实现Form表单验证
- 页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理
- BOOTSTRAP时间控件显示在模态框下面的bug修复
- el表达式 写入bootstrap表格数据页面的实例代码