bootstarp 常用组件

组件是对数据和方法的简单封装   我们可以直接调用他来实现某些功能 （简单来说就是写好的方法，拿来使用）

============================================================

图标组件 ：

bootstarp有250多个来自 Glyphicon Halflings（收费的，但是允许bootstarp免费使用） 的字体图标。

1.图标都需要一个基类  glyphicon     和  glyphicon-superscript  对应每个图标的类。为了设置正确 的内补，务必

在图标和文本之间，添加空格。

2.图标类不能直接与其他组件联合使用。。他们不能再同一个元素上与其他类共存，我们一般用一个嵌套的span标签

将图标类放在span上。

3.只对内容为空的元素起作用   ，图标类只能应用在 不包含任何文本和子元素的元素上。干干净净的一个span就好了。

4.如果改变了图标字体文件的位置，那么相应 的css也要修改。

5.图标访问性

-现代的辅助设备能够识别并朗读css生成的内容和特定的unicode字符。如果我们的图标不表示任何含义只是单纯的

图标  那么我们可以使用  aria-hidden = “true”  这样他就单纯是个图标 不会被辅助设备读取到。

-如果我们想要通过图标表达某种含义，又不想被用户看到 可以使用  sr-only类 将图标隐藏

这样他包含的内容 h 也会被隐藏掉

-如果我们创建的组件不包含任何内容   只是一个button 里面一个图标   我们应该提供其他内容，让用户知道图标的含义

这个时候我们可以使用 aria-label（给当前元素添加描述  使辅助设备知道他表达的含义） 类似于提示信息？

 

===========================================================================================

下拉菜单

使用下拉菜单组件时需要导入 js文件 以及 jquery  因为他的功能实现是基于js 的 将这两个文件导入才能正常使用

注意：在使用bs的组件时需要加载 bootstrap.js 和 jquery 文件  注意加载顺序  jquery在前  

规则：

1、需要 dropdown 容器将下拉菜单和触发器包裹 （如果用dropup  菜单就会向上弹出！！！）

2、触发器（按钮或其他元素） 触发器中要具有类 dropdown-toggle   和属性 data-toggle（属性值是dropdown）

3、下拉列表（菜单） 需要具有类 dropdown-menu

以上是基本要求

-dropdown-menu-right  可以让菜单右对齐 dropdown-menu-left 左对齐   不建议使用浮动  pull-left  pull-right

- 可以通过 dropdown-header 来设置标题  

- 通过 class=“divider” 添加分割线    

-为下拉菜单中的li 添加 类disabled 禁用菜单项  

=========================================================

role  为了给辅助设备一个正确的信息  例如 form 辅助设备就知道这是一个表单  button 这是一个按钮

我们在按钮组时给 role = group   工具栏时  role=toolbar

按钮组：

其实就是用  btn-group  包裹类 btn   这样就形成了一个按钮组  通过 btn-group 包裹 btn 就可以形成一个按钮组

按钮工具栏

将按钮组 包裹在工具栏 btn-toolbar 中 可以形成按钮工具栏  做成更复杂的组件

--  通过 btn-group-lg|xs|sm|md 可以为按钮设置大小  跟在 btn-group 后面

嵌套： 想要把下拉菜单混合在按钮中 只需要把一个按钮组放入另一个按钮组中就能实现

-  btn-group-vertical 类 能够让按钮组垂直排列  分列式按钮下拉菜单不支持这种方式  只能用在按钮组上

====================================================

按钮式下拉菜单  ：把任意一个按钮放在 btn-group 中 ，在加入适当的菜单标签  就可以让按钮作为菜单的触发器了。

- 分裂式按钮 下拉菜单  

实现与上面并无不同，只不过是多了一个按钮  利用了按钮组的原理。

--给按钮式下拉菜单的父元素 添加 dropup 类就会变成向上弹出的菜单。

========================================================

导航组件 ： 

基类  nav     

标签页  nav-tabs

胶囊式标签页 nav-pills   胶囊式标签页可以垂直排列 只需要加入类 nav-stacked

 给导航项添加 disabled 可以禁用链接

-配合下拉菜单 可以实现  带下拉菜单的标签页

==========================================================

导航条组件： 

导航条尽量使用 <nav> 标签

导航条 类  navbar navbar-default

类container-fluid  实现居中效果

到航头 container-fluid

 

 

=====================================================

大部分的使用都是带有基类的   基础的样式 在基础上进行使用

徽章  

---组件  巨幕   能够延伸至整个浏览器窗口来展示内容    简单来说就是被他包裹的内容 会真个屏幕的宽度显示出来。

 

 

-----------------------------------------------------------------------------------------------

bootstarp 插件 

插件是基于jquery   所以要先引入jquery

====================================================

模态框插件  ： 弹出一个子窗体  覆盖在 父窗体之上   

通过按钮启动一个 模态框

模态框的主体      id必须与 data-target属性值一致    需要一个基类 来定义模态框   modal   fade（切换效果，淡入淡出）

然后我们需要一些列的类 来支撑起模态框

modal-dialog  对话框 将所有内容包裹

modal-content  内容部分

modal-header 头部

modal-body 身体

modal-footer 底部

close是用来设置样式的  modal-dismiss=“modal” 来实现关闭行为

以上代码就实现了一个模态框   

 

==============================================================================

滚动监听

利用的是 锚点 来对应监听的id

两个重要的属性是  data-target=“#text” 执行滚动监听的目标    data-spy=“scroll” 添加滚动监听

滚动监听 主要就四点

一，设置导航栏 作为监听的目标

二，将监听的文本与导航栏绑定   监听文本的 data-target 属性值 与 导航栏id 一致

三，给文本添加滚动监听   利用属性  data-spy=“scroll”

四，实际的监听是由锚点实现的  导航栏中a标签的href 对应着下面文本的id 实现了监听效果。

监听中重要的一点就是 被监听的组件 要相对定位

=================================================================

 

 

 

-这些组件插件都是一些固定的写法，看懂了用熟练了 就记住了。

组件是定义好的复杂的样式   而插件则添加了交互效果  这是他们两个的区别

 

 

 

 

 

 

 

对于我们使用过的组件 最好记录下来 方便我们的后续使用 和记忆