零基础Bootstrap学习之路

一、概述：Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

二、作为一个前端人，为什么学习Bootstrap？究其原因主要有以下几点：

（1）移动端先行：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

（2）浏览器的选择方面：所有的主流浏览器都支持 Bootstrap。

（3）容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

（4）灵活的响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

（5）代码简单优雅，它为开发人员创建接口提供了一个简洁统一的解决方案。它包含了功能强大的内置组件，易于定制。它还提供了基于 Web 的定制。

三、Bootstrap主要包括哪些知识内容你？

1）简单的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.ttf
    └── glyphicons-halflings-regular.woff

 

2）全局CSS样式

3）组件

4）Javascript插件

5）及Bootstrap的定制（非学习重点）

四、实例分析详解

1）基本模板，以下是一个最简单的Bootstrap页面了

<!DOCTYPE htm<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">
    <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="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://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="http://cdn.bootcss.com/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>
2)

 <!-- 1.设置 字符的编码格式-->


    <meta charset="utf-8">




    <!-- 2.让IE游览器渲染试图，按照edge游览器的方法 -->




    <meta http-equiv="X-UA-Compatible" content="IE=edge">




    <!-- 3.这是vieport 视口 -->




    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->




    <!-- meta:vp -->




 




     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">




     <!-- width=device-width 让网页的尺寸等于手机的尺寸




          user-scalable = no; 禁止缩放（不推荐所有页面使用，具体看情况）




          initial-scale = 1;使CSS里面的标签 按照设置的尺寸1:1显示在手机上




 




      -->



3）容器布局、版心


 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding等属性的原因，这两种 容器类不能互相嵌套。


 .container 类用于固定宽度并支持响应式布局的容器


   .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器


4）栅格系统


Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。


简介


栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：


1>“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。


2>通过“行（row）”在水平方向创建一组“列（column）”。


3>你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。


4>类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。


5>通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间   接为“行（row）”所包含的“列（column）”抵消掉了padding。


6>如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。


学习者可以研究一些实例，更好的掌握此知识点


5）代码块


可以使用pre标签和.pre-scrollable来给设置相应的最大页面滚动条


6)


基本实例


为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。


其写法如下:


<table class="table">
  ...
</table>
7)带边框的表格
添加.table-bordered类为表格和其中的每个单元格增加边框


<table class="table table-bordered">
  ...
</table>
8）鼠标悬停




通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。







#First NameLast NameUsername





1
Mark
Otto
@mdo




2
Jacob
Thornton
@fat




3
Larry the Bird
@twitter








Copy




<table class="table table-hover">
  ...
</table>
9）




通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。







#First NameLast NameUsername





1
Mark
Otto
@mdo




2
Jacob
Thornton
@fat




3
Larry the Bird
@twitter








Copy




<table class="table table-condensed">
  ...
</table>
10）状态类




通过这些状态类可以为行或单元格设置颜色。







Class描述





.active
鼠标悬停在行或单元格上时所设置的颜色




.success
标识成功或积极的动作




.info
标识普通的提示信息或动作




.warning
标识警告或需要用户注意




.danger
标识危险或潜在的带来负面影响的动作













    







Copy




<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>
11)
基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
















Example block-level help text here.






五、组件


1）Gliphicons字体图标


2）下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的Javascript让它具有了交互性。


实例


将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。






3)按钮组




通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。


按钮组的工具提示和弹出框需要特殊设置




当为 .btn-group 中的元素应用工具提示或弹出框时，必须指定 container: 'body' 选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。


基本实例






Wrap a series of buttons with .btn in .btn-group.










Copy




<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
按钮工具栏




把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。
















Copy




<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>

4）


通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。


只支持文本输入框




这里请避免使用 <select> 元素，因为 WebKit 浏览器不能完全绘制它的样式。


避免使用 <textarea> 元素，由于它们的 rows 属性在某些情况下不被支持。


输入框中的工具提示和弹出框需要特殊设置






为 .input-group 中所包含的元素应用工具提示（tooltip）或popover（弹出框）时，必须设置 container: 'body' 参数，为的是避免意外的副作用（例如，工具提示或弹出框被激活后，可能会让当前元素变得更宽或/和变得失去其圆角）。


不要和其他组件混用






不要将表单组或栅格列（column）类直接和输入框组混合使用。而是将输入框组嵌套到表单组或栅格相关元素的内部。


基本实例




在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。


我们不支持在输入框的单独一侧添加多个额外元素。


我们不支持在单个输入框组中添加多个表单控件。


六、Javascript插件


Javascript给Bootstrap赋予了生命，可以简单的一次性引入所有插件，或者逐个引入到你的页面中。


1）单个还是全部引入


Javascript可以单个引入（使用Bootstrap提供的单个*.js文件工具），也可以一次性行全部引入（使用Bootsrap.js或者压缩版Bootstrap.min.js）


建议使用压缩版的js


bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。


2)组件的 data 属性


不要在同一个元素上同时使用多个插件的 data 属性。例如，button 组件不能同时支持工具提示和控制模态框。如果需要的话，可以在其外面包裹一个额外的元素。


插件之间的依赖关系


某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。注意，所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）。 


3）Data属性


你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。


话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样：


Copy




$(document).off('.data-api')





另外，如果是针对某个特定的插件，只需在 data-api 前面添加那个插件的名称作为命名空间，如下：


Copy




$(document).off('.alert.data-api')
编程方式的API


我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。


Copy




$('.btn.danger').button('toggle').addClass('fat')





所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：


Copy




$('#myModal').modal()                      // 以默认值初始化
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // 初始化后立即调用 show 方法





每个插件还通过 Constructor 属性暴露了其原始的构造函数：$.fn.popover.Constructor。如果你想获取某个插件的实例，可以直接通过页面元素获取：$('[rel="popover"]').data('popover')。


默认配置


每个插件都可以通过修改其自身的 Constructor.DEFAULTS 对象从而改变插件的默认设置：


 


Copy




$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false







以上是本人整理的部分Bootstrap学习笔记，具体全面了解使用和掌握Bootstrap知识，以下载Bootstrap完整插件为准。





 




 




 


 


 
















 


 


 


.


 


 








            

            
posted @ 
2016-12-14 16:54 
陌上辰 
阅读(135) 
评论(0) 
 
收藏 
举报