关闭

bootstrap慕课网笔记 bootstrap入门

标签: bootstrap
801人阅读 评论(0) 收藏 举报
分类:
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版本
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:18645次
    • 积分:390
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:2篇
    • 译文:4篇
    • 评论:0条