bootstrap小结

11月23日
天气：温和 心情：还好 心态： 没崩 （因为半天就可以回家了）
最近一周温习了bootstrap的种种，基本算是搞完了。
**附上今天随手做的小练习：**
[机试题.zip][1]
[1]: https://www.zhushuaiqi.xyz/usr/uploads/2019/11/866022028.zip
还有一个项目等着去做，所以先做一个简单些的bootstrap总结。具体如下：
**叨叨半天了，正题：**
## 基础部分 ##
1.首先是引入，这个不用说了，link。
2.其次是 js 的引入，由于我上官网查找了一翻，发现 bt 的所有 js，插件等等都是基于 jQ 写的，所以注意引入不管什么插件都要先引入 jQ。
基于媒体查询
3.row 为行，col 为列，一个 row 中有 12 等份的 col，安排份数超过 12 行就换行。
默认居中
4.对应媒体查询：
xs：超小屏幕（<768px）xs
sm：小屏幕（>=768px<992px）sm
md：中等屏幕（>=992px<1200px）md
lg：大屏幕（>=1200px）lg
5.row col 等份不能加小数点（亲测）。
**6.样式因为是封装好的，调整源码需要翻几 w 甚至更多行代码（具体没看），所以我在测试阶段就赶紧试了样式微调，因为封装的虽多，但是毕竟多的不一定就是你想要的，然后发现！样式可控，简单来说就是可以在行内样式进行微调，最担心的就是因为封装的太多，怕微调后与其冲突，但是还好没有，亲测可行。但是影响了宽度。咳，具体自己在调试一下。**
7.offset 为偏移量，也就是向右偏移，其实也就是增加了左 margin，谁需要偏移直接在行内偏移。格式为：col-xx-offset-xx，第一个 xx 为对应的宽度，第二个为偏移了几份，还是以 12 为基准。
类名为 container 的盒子默认为居中占约 70% 的宽度，可以改为 container-fluid，为居中占 95% 左右的宽度。
8.列嵌套式行内是列，列内不能是列，列内还得是行并且均分 12 份。
push 向右偏移，pull 向左偏移
9.表格生成真的很好用，超级大的一个表格直接就生成了，关系式在脑子里。
table 为表格基础类，必须写，table-bordered：表格边框，table-striped：条纹状（也就是隔一个一条阴影），table-hover：也就是伪类的效果，颜色为暗灰色，亲测可控，通过类名覆盖。
按钮都挺好玩的。
10.响应式图片：img-responsive：图片多大都得充满父元素，边框：img-rounded（圆角）img-circle（椭圆 =<个人感觉 border-rodius50%>）img-thumbnail（给图片加个框）。

----------
# 进阶部分 #

**也是让我很惊叹的部分：**

1. 纯CSS轮播图
应该是利用了animation这个玩意，不过上手还是挺方便的。在使用方面主要利用了carouse，且配置好adcive和各个target元素。没什么难的。相比原生js的轮播简直不要太方便。
2. 模态框，由于这个没点技术难度，直接上例子了
代码如下：
<button class="btn btn-success" type="button" data-toggle="modal" data-target="#mymodal">安全退出</button>
<div class="modal fade" id="mymodal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
<h4 class="modal-title">微信应用提示</h4>
</div>
<div class="modal-body">
<p>确定要退出应用吗？</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary">确定</button>
<button class="btn btn-danger" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
*上面这个模态框通过对按钮的绑定事件达到对模态框的控制效果，然后设置好模态框的内容就好，没难度，略过*

 

----------

3. 展开闭合：
先上代码：

<div class="container">
<div class="row">
<div class="col-xs-6">
<a class="btn btn-primary" data-toggle="collapse" href="#collapse1">显示或隐藏</a>
<button class="btn btn-primary" data-toggle="collapse" data-target="#collapse1">显示或隐藏</button>
<div class="collapse" id="collapse1">
<div class="well">
<h1>Hello World</h1>
</div>
</div>
</div>
<div class="col-xs-6">
</div>
</div>
</div>
*上面这个是通过按钮对内容展开闭合状态，但是用到了well类名，我看了源码是个设置好的类名*

4. 工具提示：
*data-toggle="tooltip" data-placement="bottom" title="用于显示和隐藏模态框"*
*靠这三个属性来控制按钮的提示，提示文本以及提示文本方向*

5. 以及弹出框：依据工具提示的前提，加上data-content就成弹出框了。

----------
**绝对注意绝对注意的是工具提示与弹出框都需要 $('[data-toggle="tooltip"]').tooltip();或 $('[data-toggle="popover"]').popover();在js文件中手动调用才能生效，第一个为工具提示的调用代码，第二个为弹出框的调用代码**

----------

6. 滚动监听：
依赖于导航组件，用于高亮显示选中的链接。
ps：类名为icon-bar的span元素*3就是导航中常见的三道杠。
每个导菜单项必须有一个跳转目标，与当前文档中的一些元素中ID相匹配
为被监听的元素设置相对定位，position-reative 但是大多时候监听的是body元素。

 

 

ps：全局禁过渡：
$.supprot.transtion=flase。

 

总结完了。

原文地址：https://www.cnblogs.com/zhushuaiqi/p/11918296.html