bootstrap慕课网笔记 bootstrap入门

原创 2015年11月19日 19:36:20
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版本

Boostrap入门+样式学习--贰--(慕课网大漠《玩转bootstrap》[基础])

bootstrap1. 标题样式 除了有标签 h1~h6 之外,bootstrap还提供了对应的六个类名:.h1~.h6 重新设置了margin-top和margin-bottom的值, h1~h...
  • emilyRR
  • emilyRR
  • 2015年08月14日 22:01
  • 1158

使用HttpClient向HTTPS地址发送POST请求4.1.2

使用HttpClient向HTTPS地址发送POST请求 package com.jadyer.util;    import java.io.IOException;  import jav...

初学Redis(2)——用Redis作为Mysql数据库的缓存

用Redis作Mysql数据库缓存,必须解决2个问题。首先,应该确定用何种数据结构存储来自Mysql的数据;在确定数据结构之后,还要考虑用什么标识作为该数据结构的键。         直观上看,...

慕课网Java入门学习笔记

Java 入门第二季Java 中的 static 使用之静态方法1、 静态方法中可以直接调用同类中的静态成员,但不能直接调用非静态成员。如果希望在静态方法中调用非静态变量,可以通过创建类的对象,然后通...

JavaScript学习笔记——慕课网(JavaScript入门篇)

JavaScript初学笔记 1.常用互动方法 2.简单DOM操作
  • lusg02
  • lusg02
  • 2016年07月15日 00:14
  • 136

慕课网html入门知识笔记整理

认识head标签 span {     color :green ;     } 学习HTML笔记 HTML标记的学习   段落1"p"标签的默...

《C语言入门》笔记---慕课网

第一章 初始C程序1.1 初始C语言 简单来说,一个C程序就是由若干头文件和函数组成。 1.2 C程序结构 预处理命令的作用是通知C语言编译系统再对C程序进行正式编译之前需要做一些预处理工作。 函数就...

慕课网c语言入门学习笔记(continue,switch,goto)

1.打一个星号图 2.打一张九九乘法表(for(;;;)打成,导致了编译错误;\n不是/n是右上角的那个向右边偏) 3.break语句 使用break语句时注意以下几点: 1、在没有循环结构的情...

慕课网Vue.js入门基础学习笔记——vuejs及相关工具介绍

2、Vuejs开发环境的搭建 1)推荐使用官方提供的命令行工具: 快速下载一套基于vuejs的开发模板,不仅包含了vuejs的框架,还包含了vuejs打包工具、测试工具、开发调试的服务器等,可以不必关...

慕课网学习Java入门第一季笔记

JVM(Java Virtual Machine) 进行java开发的时候,首先需要编写java的源代码文件,以.java结尾。 编译器compiler对源代码进行编译 编译后产生二进制的字节码文...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap慕课网笔记 bootstrap入门
举报原因:
原因补充:

(最多只允许输入30个字)