[散修弟子]JS-2011|2019年09月18日的日报-技能树.IT修真院

发表于： 2019-09-18 23:54:40

2 1024

bootstrap的总结

参考：

玩转boostrap（基础）https://www.imooc.com/learn/141

玩转boostrap（JS插件篇）https://www.imooc.com/learn/262

一、基础知识

1. boostrap作为前端框架，优先移动设备，方便整合，实现响应式布局、字体图标、栅格化设计等，拥有完整的类库，以及可以应用丰富的Jquery插件；
2. 专门针对boostrap的开发工具为： jetstrap，可以下载使用；
3. 下载boostrap文件，里面有css、font、js的文件夹，css多用boostrap.css或min.css，js要另外下载，引用js文件也可以引用jquery文件，可以通过npm下载；
4. 只需引用css、js、jquery文件，自动对html文件的应用样式；
5. 在Bootstrap中的JavaScript插件都是依赖于jQuery库，不论是单独导入还一次性导入之前必须先导入jQuery库，注意对应的版本数；

① 一次性导入：<script src="js/bootstrap.min.js"></script>，导入压缩版本的；

② 单独导入：可以到github去下载单独的插件（https://github.com/twbs/bootstrap）；

二、全局样式

1. 排版

① 标题（h1~h6/.h1~.h6），还有副标题（small标签，作为内联元素，可以插在h1等之间），其中h1为36px，h2为30px，h3为24px，h4为18px，h5为14px，h6为12px；除了在html文件中标签引用，还可以类引用，效果一样；

② 文本：默认为14px，行高为20px，底部外边距为10px；

2. 对齐：.text-left、.text-center、.text-right可以设置文本的左中右对齐，.text-uppercase、.text-lowercase、.text-capitalize来改变大小写或首字母大写，通过声明对应的类名来应用；

3. 文本样式：mark标签为突出，del标签为删除线，ins标签和u标签为下划线，small标签为缩小字体，strong标签为强调；

4. 表格：简单样式为.table，都是用类名应用，可以空格分隔来应用多个类，同样也可以声明其他类来使表格变色，如danger为红色，active为悬停变色，success为绿色，info为淡蓝色，waring为黄色，还有更多的样式可以自行查看表格的完整列表；

.table-bordered：带边框的表格

.table-striped：条纹状的表格

.table-hover：悬停变色的表格

.table-condensed：紧凑的表格

5. 表单：建立在form标签里面，同样通过类名应用，也可以空格分隔来使用多个类名

.form-group可以作为输入框组件（自带margin间距）；

.form-control给输入框可以应用样式，自带点击发光效果；

.form-inline可以把块状元素变为内联元素；

.form-lg或.form-sm可以使输入框变大或变小；

.sr-only可以把label的文本消失，.control-label把lebel变为可应用组件样式的文本；

.has-success可以把组件里的样式变为绿色，.has-warning为黄色，.has-error为红色；

6. 按钮：input或button标签都可以，a标签也可以应用以下的类名变为按钮

.btn变为圆角按钮；

.btn-default变为白色圆角按钮，且带悬停变色；

.btn-success可以使按钮变为绿色，primary为深蓝色，info为淡蓝色，danger为红色，warning为黄色；

.btn-link为蓝色连接文本；

.btn-lg或.btn-sm可以使按钮变大或变小；

.btn-block可以变为块状元素；

active把悬停状态变为点击状态，disabled变为禁用状态；

7. 图片：

.img-rounded：圆角效果；

.img-circle：变为圆形；

.img-thumbnail：变为带有边框的圆角图形

三、渐进和响应式布局

1. meta标签的viewpoint，可以使手机端和移动端的像素对应，全局比例不变，所以必须声明；
2. 如需适应不同高清屏的屏幕，可以采用阿里巴巴的前端方案；

3. @media媒体查询，可以针对不同分辨率的屏幕进行样式定制化适应；
4. 栅格布局：

①

② 可以在类声明里，增加相应的类前缀即表示样式在哪个分辨率范围内生效，如.col-xs-12，即在768px下，元素占比为全屏的12/12，即100%，如.col-sm-3，则是在平板的分辨率，元素占比为全屏的3/12，所以可以声明所占的列数（最大列数为12）；

🌂也可以增加offset来实现偏移，如.col-offset-xs-3，即在左往右偏移3个列数；

5. 单位：rem用作html声明，声明为0.625可以使em变为10px，为能兼容部分ie，可以先写rem再写px来适应；
6. 字体图标：即把图片以字体的形式引用，可以通过@fontface引用iconfont，或者在iconfont网站上引用，如需引用默认的bootstrap的字体图标，直接连接bootstrap的css即可

① 打开iconfont引用的字体图，选择需要引用icon下的字体名字，作为类名即可引用；

② 如需改变icon的样式，选择icon的类名（即最后一个空格的名），在另外的css声明其他样式即可，如改变字体一样；

四、组件

1. 怪异的属性（多为给障碍人士设置）：

① role：给盲文浏览器识别的，作为语义化的标签；

② aria-label：配合读屏软件，识别输入框获取焦点时的内容；

🌂tablndex：给tab键安排焦点转移的顺序；

④ data-：给页面数据增加data-，使数据不会显示在页面，方便在暗下进行传递，也方便组件交互；

2. 字体图标：如默认字体图标，glyphicon，引用具体的，则增加后缀名，即glyphicon-star，所以在html中引用，则是在类名上增加，class=”glyphicon glyphicon-star“；
3. 下拉菜单：.dropdown表示下拉菜单，而.dropdown-menu-right为右对齐，divider可以添加分割线

①

② 写在dropdown类名的div里面，增加button并添加按钮样式，dropdown-toggle为下拉按钮的小三角图标，data-toggle=“dropdown”，即绑定选项信息在按钮上；

🌂下拉菜单的选项信息为ul、li组合，在dropdown-menu的类名ul下增加li选项，作为下拉菜单的选项；

4. 控件组：.input-group表示控件组，.input-group-addon可以放置额外的内容与图标；

①

5. 导航：.nav为无序列表的导航，即写在ul li的组合，

.nav-tabs为可切换的导航

.nav-pills为胶囊导航

.nav-justified使导航垂直

.nav-stacked为垂直导航

6. 分页：.pagination给父元素中添加分页，如页数排列，写在ul、li组合；

.pager放置在翻页区域，即写出向左翻页或向右翻页，同样也是写在ul上，再连接网站链接；

.previous把链接左对齐，.next把链接右对齐

7.进度条：.progress表示进度条，.progress-bar-striped使进度条颜色变为条纹，可以通过状态类声明来改变状态条的颜色

① 在子元素的div，添加class="progress-bar" style="width:60%;"则表示进度条位置在60%处，还可以写文本，来放在进度条内；

② 如需改变颜色，在class里增加progress-bar-状态，即可改为相应的状态色；

8. 列表：.list-group代表列表组，写在ul、li里面，li即详细列表为.list-group-item；

① .badge代表数字的样式

② .active为选中状态，也可以写其他状态；

🌂改变颜色，也是可以写为.list-group-item-状态；

9. 面板：多为弹窗或提示信息，.panel表示面板，写在div的嵌套；

① .panel-heading为面板的头部；

② .panel-body为面板的主体内容；

🌂.panel-footer为面板的注脚；

④ .panel-状态可以写在最外面的panel的div里，来改变头部的颜色；

五、插件

1. 引用插件：引用bootstrap.js和jQuery.js这两个文件，要选择正确jQuery的版本；
2. 通过data-属性来控制页面交互，如data-toggle为绑定显示内容的类，data-target为绑定显示可操作的内容的类或id名，data-dismiss为绑定关闭内容的类；
3. 简单的控制显隐，如下方“这是一个内容”的设置；

六、模态弹出框

1. 动画过渡：transition.js，默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果

① 引用链接后，在html的js里增加以下点击事件：

$(function(){

$(".btn").click(function(){

$("#mymodal").modal("toggle");

});

② 解除属性绑定：

$(function(){

$(".btn").click(function(){

$("#mymodal").off("toggle");

});

2. 模态弹出框：modal.js，LESS版本：modals.less，Sass版本：_modals.scss，在 Bootstrap 框架中把模态弹出框统一称为 Modal；
3. 模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，通过div层层嵌套，其中“modal-content”中，其主要又包括三个部分：
① 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮；

② 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容；

🌂弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮；

4. “modal”实现模态弹出窗固定在浏览器中的，“modal-dialog”实现宽度自适应，且水平居中，以及在浏览器大于768px时，弹窗的宽度为600px；
5. “modal-backdrop”为黑色背景蒙版，同样，bootstrap给其添加了一个过渡动画，从fade到in，把opacity值从0变成了0.5；
6. 触发模态弹出窗：

① 模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target，data-toggle必须设置为modal即触发器，data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般为ID；

② 触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性，同样也必须有data-toggle，也必须设置为modal即触发器，但建议统一用data-target；

7. 可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果，添加在弹窗的modal类名中，以空格隔开；
8. 还有其他data-属性，如下

9. 也可以通过JS触发，即给一个按钮一个单击事件，然后触发模态弹出窗，id名为弹出窗的id：

$(function(){

$(".btn").click(function(){

$("#mymodal").modal();

});

10. 使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置；

① 如自定义属性，添加在$("#mymodal").modal({ })的中括号里面；

$(function(){

$(".btn").click(function(){

$("#mymodal").modal({

keyboard:false

});

② 参数设置，

🌂事件设置

$('#myModal').on('hidden.bs.modal', function (e) {

// 处理代码...

})

七、下拉菜单

1. dropdown.js，LESS版本：对应的源文件dropdowns.less， Sass版本：对应的源文件_dropdowns.scss；
2. 触发下拉菜单方式有两种，一种是属性声明式用法，另一种是JavaScript方法：

① 声明式：

一般下拉菜单都是出现在导航条中，被点击的菜单项链接或按钮需要添加自定义属性 data-toggle="dropdown"；如果触发下拉菜单的元素是一个链接元素，为了避免点击链接，页面跳到顶部，可以使用data-target="#"来替代href="#"；

② JS法：

3. 使用JavaScript调用dropdown()方法后，单击激活按钮，会弹出下拉菜单，再次单击的时候会收起下拉菜单

$(function(){

$(".dropdown-toggle").dropdown();

})

a.参数“toggle”。当下拉菜单隐藏时，调用dropdown(“toggle”)方法可以显示下拉菜单，反之，如果下拉菜单显示时，调用dropdown(“toggle”)方法可以让下拉菜单隐藏，每次单击都要两次toggle，会处于不变的状态；

$(function(){

$(".dropdown-toggle").dropdown("toggle");

})

b.需要使用参数“toggle”，也建议使用jQuery的one方法

$(".dropdown-toggle").one("click",function(){

$(this).dropdown("toggle");

})

八、滚动监视器

1. scrollspy.js，当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项，即会触发到达的元素的active样式，如果导航里有下拉菜单，并且滚动区域的内容到达下拉菜单子项所对应的区域，除了菜单高亮以外，子菜单的父元素dropdown也会高亮；
2. 应用滚动监视器：

① 引用scrollspy.js；

② 设计一个带有下拉菜单的导航条。分别为导航条和下拉菜单项定义一个锚点链接，锚点分别为“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同时为导航条定义一个id值“navbar-menu”（id名称可自由定义），方便滚动监控；

🌂设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy（这个类名可自由定义）的容器中，并添加“data-target="#navbar-menu"”属性，要以前面的导航条id名一致；

④ 在监控对象的容器内，放了多个子内容框。每个子内容框有一个标题，而且每个标题的ID值与导航菜单项中的锚点链接名相对应；

🌫为监控对象定义样式，设置容器scrollspy大小（设置高度目的是为了产生垂直滚动条），定义高度和overflow:auto;

3. 为监控对象设置被监控的data属性：data-spy="scroll"，指定监控的导航条：data-target="#navbar-menu"。同时定义监控过程中滚动条偏移位置data-offset="60"；
4. 可以直接在body上进行滚动条监控，此时要将滚动监控器移到body上，而且导航nav一定要在body内部，导航条必须设置为顶部固定样式（navbar-fixed-top）；

5. JavaScript方法触发滚动监控器

$(function(){

$("#scrollspy").scrollspy({

target: "#navbar-menu"

});

})

① scrollspy("refresh")。当滚动监控所作用的DOM有增加或删除页面元素的操作时，需要调用下面的refresh方法，注意，只对声明式用法有效：

$(function(){

$("[data-spy='scroll']").each(function(){

var $spy=$(this).scrollspy("refresh");

})

② offset参数，此参数默认值为10。默认情况下，滚动内容距离滚动容器10px以内的话，就高一片面前显示所对应的菜单项；

九、选项卡

1. tab.js，用户点击或悬浮对应的菜单项，能切换出对应的内容，主要有两部分内容组成：

① 选项卡组件（也就是菜单组件），对应的是 Bootstrap的 nav-tabs；

② 底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示；

🌂菜单组件中链接的锚点，要与对应的面板内容容器的ID一致；

2. 触发选项卡的切换效果

① 选项卡每一个导航链接中都要设置 data-toggle="tab"，并且设置 data-target="对应内容面板的选择符(一般是ID)";；

② 面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配；

3. 添加 fade 样式，可以使切换有渐隐渐显的效果，同样添加在每个面板内容的class中，并以空格隔开，如class="tab-pane fade"；
4. 更换为胶囊导航，在ul选项卡的class样式变为nav-pills，并在li的选项换为data-toggle="pill"；

5. JavaScript触发方法：

① 在每个链接的单击事件中调用tab("show")方法，显示对应的标签面板内容；

$(function(){

$("#myTab a").click(function(e){

e.preventDefault();

$(this).tab("show");

});

})

② id名为点击触发的按钮的id，或者可以是包含的链接作为触发器；

十、提示框

1. tooltip.js，LESS版本：对应源文件 tooltips.less，Sass版本：对应源文件 _tooltips.scss；即悬停弹出的提示信息框；
2. 应用提示框：

① 声明data-toggle="tooltip"；

② title或data-original-title 设置提示信息，填写文字内容；如果同时设置了 data-original-title 和 title 定义提示信息，那么 data-original-title 的优先级要高于 title；

🌂data-placement 自定义属性来控制提示信息框的位置，如设置四个值：top、right、bottom和left；

3. JS触发：

① 不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发，已有data-属性声明；

$(function(){

$('[data-toggle="tooltip"]').tooltip();

});

②也可以单独指定一个元素，在该元素上调用提示框，无需定义data属性值；

$(function(){

$('#myTooltip').tooltip({

title:"我是一个提示框，我在顶部出现",

placement:'top'

});

4. 其他自定义的data-属性：

5. 其他Javascript的参数值

$(function(){

$('#myTooltip1').tooltip({

title:"我是一个提示框，我在顶部出现",

placement:"top"

});

</script>

十一、弹出框

1. popover.js，LESS版本：对应的源文件是 popovers.less，Sass版本：对应的源文件是 _popovers.scss
2. 弹出框除了有标题 title 以外还增加了内容content 部分，而在提示框中是没有的，而且提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框popover 是 click；
3. 多了一个content内容，通过data-content 来定义弹出框中的内容；
4. 与提示框一样的JS触发：

① 已有data-属性声明：

$(function(){

$('[data-toggle="popover"]').popover();

});

② 无data-属性声明，在JS的参数声明：

$(function(){

$('#myPopover').popover({

title:"我是弹出框的标题",

content:"我是弹出框的内容",

placement:"top"

});

5. 其他自定义的data-属性

十二、警告框

1. alert.js，LESS版本:源文件 alerts.less，Sass版本:源文件 _alerts.scss
2. class=“alert”，警告框插件就是在“警示框组件”基础上添加了一个关闭的按钮；
3. 触发警告框

① 声明式：

需要在关闭按钮上设置自定义属性data-dismiss="alert"，可以是默认的×，或者自定义的按钮，且要在class=“alert”的警告内容的div里面；

② JS法：给关闭按钮添加一个点击事件，即id名为关闭按钮的id；

$(function(){

$("#close").on("click",function(){

$(this).alert("close");

});

十三、按钮插件

1. button.js，LESS版本：源文件buttons.less，Sass版本：源文件_buttons.scss；用于自定义功能按钮；
2. 按钮加载状态：通过data-loading-text属性定义加载的文本信息，再用JS法触发，无法用声明法触发：

$(function(){

$("#loaddingBtn").click(function () {

$(this).button("loading");

});

3. 模拟单选按钮：通过给按钮组自定义属性data-toggle="buttons"，子按钮样式为radio类型的单选按钮即input[type="radio"]，无需用JS法触发，已自带点击效果；
4. 模拟复选按钮：通过在按钮组上自定义data-toggle="buttons"来实现，子按钮样式为checkbox的复选按钮样式，即input[type="checkbox"]，也无需JS法触发；
5. 按钮状态切换：使用data-toggle 属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换，变为可以按下的效果，即data-toggle="button"；
6. JS的参数设置：

① 切换按钮状态（得到焦点）：

$("#mybutton").button("toggle")

② 重新恢复按钮：

$("#mybutton").button("reset")

🌂任意参数，替换 html的button的属性中，data-任意字符参数名-text 的属性值为“按钮上显示的文本值”，即按下去就会变为另外的文本值：

$("#mybutton").button("任意字符参数名")

十四、手风琴

1. collapse.js，点击标题，可以让其对应的内容显示或隐藏，类似于手风琴的折叠效果；
2. 组成部分：

① 大包含块div，声明为class="panel-group"，包含折叠的面板组；

② 每个折叠的面板组声明为class="panel，包含一个头部panel-heading和一个内容面板panel-collapse

🌂头部包含一个标题，声明class="panel-title"；

④ 内容面板包含一个内容，声明class="panel-body"；

<div>

</div>

<div>

<div>折叠区内容...</div>

</div>

3. 触发手风琴，只有声明式：

① 在tittle添加触发器，data-toggle="collapse"，data-target="#折叠区标识符"，在panel-collapse，添加折叠区的id，

② 如想内容默认不可视，添加collapse，如

class="panel-collapse collapse"，

🌂 如想默认只有第一个面板内容可视，追加in，如

class="panel-collapse collapse in"；

④ 如想点击后全部折叠区隐藏，再打开所单击的区域，即触发大包含块的id，如

data-parent="#myAccordion"，

4.总结：

① 使用 panel 的 panel-title 做为触元素，使用panel-body的父元素作为折叠区；

② 使用一个 panel-group 来包含多个 panel，从而实现手风琴效果；

🌂每个 panel 里的触发元素都要指定data-parent属性；

④ data-parent 属性的值对应 panel-group样式元素的ID或者其他样式标识符；

🌫触发元素需要指定 data-toggle，并且值为 collapse；

⑥ 触发元素都要指定 data-target属性；

⑦ data-target属性的值对应 panel-body 的父元素的ID或者其他样式标识符。

十五、轮播图

1. carousel.js，LESS版本：源文件carousel.less，Sass版本：源文件_carousel.scss；
2. 轮播效果是广告图从右向左播放，鼠标悬停在图片时会暂停播放，如果鼠标悬停或单击右下角圆点时，会显示对应的图片；
3. 组成部分：

① 轮播的图片；

② 轮播图片的计数器；

🌂轮播图片的控制器；

4. 设计轮播图面板：

① 定义一个容器，给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发

② 设计轮播图片计数器，用ol、li组合，ol为class=“ carousel-indicators” 样式，并默认第一个li为点击状态，即class="active"；

🌂设计轮播图片播放区，另外在ol旁添加一个同级元素div，声明class="carousel-inner"，并且其子元素div都声明class="item"，且第一个为active；

④ 设计标题和图片内容，在class="item"元素div内，增加子元素div，声明class="carousel-caption"，在其内再添加h4标签作标题和p标签作内容，如

<div>

</div>

🌫设计向前播放和向后播放的控制器，给同级元素div，声明class="left carousel-control"为向前，class="right carousel-control"为向后，如

</a>

</a>

5. 触发轮播效果

① 声明式：

a.在 class="carousel"的容器，添加data-ride="carousel"，实现自动轮播；

b.在轮播图计数器的每个 li 上，添加data-target="#slidershow"；

c.在向前或向后的按钮，添加data-slide属性，其中取值包括 prev，next，prev表示向后滚动，next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上，同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符；

d.在轮播图计数器的每个 li 上，添加data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to="2"，可以直接跳转到这个指定的帧（下标从0开始计）；

e.还有可以在 class="carousel"的容器声明其他属性，也可以在标示符（或左右控制链接）上定义，但是后者定义的优先级比较高，如下：

② JS法：

a.没有定义 data-ride 属性，则通过类或id来应用：

$(".carousel").carousel(); 或者 $("#slidershow").carousel();

b.参数设置

$("#slidershow").carousel({

interval: 3000

});

c.还有几种特殊的动作设置

$(".carousel").carousel("cycle")：从左向右循环播放；

$(".carousel").carousel("pause")：停止循环播放；

$(".carousel").carousel("number")：循环到指定的帧，下标从0开始，类似数组；

$(".carousel").carousel("prev")：返回到上一帧；

$(".carousel").carousel("next")：下一帧

十六、固定定位

1. affix.js，LESS版本：源文件 unilities.less，Sass版本：源文件 _unilities.scss；
2. 其主要功能就是通过插件给某个元素（需要固定的元素）添加或删除 affix 类名，实现元素在浏览器窗口中固定（元素带有 affix 类名固定）和不固定（元素不带有 affix 类名）的效果，如position:fixed；
3. 触发固定定位，只有声明式