2017大学第十周学习笔记

Bootstrap：

 

Bootstrap组件:

JavaScript 的配置文件<script>放置在文档最后面可以使页面加载速度更快

LESS, SASS是BOOTSTRAP不同的版本

.fade实现标签页的淡进淡出效果

tab-pane：获取标签当前元素值

data 属性使用提示工具（Tooltip）插件

data-placement=默认为top，上下左右均可。

data-toggle与script的同时运用可以让其实现默认样式的效果，切换到对应所需要的功能上来

tooltip需要jquery的激活使用

 

Bootstrap 轮播（Carousel）

附加导航（Affix）插件

data-spy="affix"实现导航对文本的监听

 弹出框（Popover）与tooltip功能类似；

关闭按钮添加 data-dismiss="alert"，通过 JavaScript 添加可取消功能

折叠（Collapse）插件

.collapse折叠内容隐藏

.collapse in折叠内容显示

：hover设置对象在其鼠标悬停时的样式表属性。

border-radius: 4px 4px 0 0依次表示左上右上右下左下

没有别的容器，container要加，不然没办法添加组件

 

 

 

 

Bootstrap规范：

 

<button>的三种type:

submit:提交表单数据

reset：重置表单数据

button：点击设置，功能自行添加

 

content="width=device-width"兼容设备宽度

<kbd><code><pre>均用以实现代码框的代码显示

需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

 .table-hover：鼠标悬停高亮的表格表格的样式可以进行效果叠加，如

<table class="table table-bordered table-hover">表示一个有边框表格悬停高亮效果的表格

在css样式包中“p>q”表示父标签p的子标签的意思

紧凑型表格仅仅缩小了内边距

响应式表格table-responsible实现对浏览器的自适应

<form>只能指定class样式为水平后，进行栅格化设置标签进行

单选择按钮radio

复选框checkbox

利用inline内联可以实现水平显示

“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。

.container会对不同的浏览器进行兼容

.dropdown-menu下拉菜单在进行点击关闭时自动·添加移除.open

等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名

 

 

个人理解：

组件的调用，必须放置到对应的容器或者面板之中。组件的使用也包含了触发器的带入，对应事件的触发事件通常以类名引入。