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...

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

JavaScript初学笔记 1.常用互动方法 2.简单DOM操作

慕课网Java入门学习笔记

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

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

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

浅谈慕课网React入门课程笔记(二)

React JSX,即JavaScript和XML,是facebook为React框架开发的一套语法糖。 语法糖,又称糖衣语法,是指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方...

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

Java 入门 第二季 学习笔记

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

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

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

JVM(Java Virtual Machine) 进行java开发的时候,首先需要编写java的源代码文件,以.java结尾。 编译器compiler对源代码进行编译 编译后产生二进制的字节码文...

分针网——每日分享:BootStrap轮播入门学习

一般模式 1首先要设置一个轮播图片的容器,记得设上id。 div id="myCarousel" class="carousel sli...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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