bootstrap4.0（bootstrap4.0菜鸟）

bootstrap3.0开始之后，bootstrap4.0版本已经也开始发布使用；这是学习Bt4的部分整理笔记；

创建一个项目目录文件：里面包含css，image,js,等存储资源的文件夹；

bootstrap4.0注意的一些知识点；

1. 一.浏览器支持IE9以上；及支持现代主流版本的浏览器；bt3支持8，现在bt4不支持IE8；

   二.移动端优先；

   三.IE兼容模式：

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

2. 3

   四.bt4在处理安卓及IOS等的一些bug问题：

   Windows Phone 8中的Internet Explorer 10:无法在@-ms-viewport规则中区分device width和viewport width；

   因此在Bootstrap 的CSS中应用媒体查询不起作用。为了解决这个问题，你需要包含下面的JavaScript以绕过这个bug。

   使用代码如下：

   if (navigator.userAgent.match(/IEMobile\/10\.0/)) { var msViewportStyle = document.createElement('style') msViewportStyle.appendChild( document.createTextNode( '@-ms-viewport{width:auto!important}' ) ) document.querySelector('head').appendChild(msViewportStyle) }

3. 4

   五.其他注意点及方法：

   使用的一些注意点及解决方法 溢出和滚动： 虚拟键盘： 导航下拉：=ios中关闭导航栏的下拉菜单，你必须直接点击下拉菜单元素 浏览器缩放： 移动设备上的:hover/:focus粘性处理’ 安卓内置浏览器：==安卓内置浏览器不会显示边缘控件,如下处理；

   <script>

   $(function () { var nua = navigator.userAgent var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1) if (isAndroid) { $('select.form-control').removeClass('form-control').css('width', '100%') } })

   </script>

4. 5

   六.bt4使用的是弹性布局flexbox，display:flex;的方式布局；这一点与Bt3不同；

5. 6

   七.易用性：

   组件==通过role及aria属性实现；例如role="group"按钮组；role='toolbar'工具栏;

6. 7

   八.跳过导航的处理：

   a.解决ch和ie的问题，如果需要保证那些被跳过的锚链接是能够得到焦点的， 你只需要在代码中添加 tabindex =”-1”来实现这一点。b.你可能想显式地禁止一个锚链接出现一个可视的焦点迹象 （特别是当前Chrome中，带有tabindex="-1"的元素，当它们被鼠标点击到了之后也会得到焦点）， 你只需要添加这么一个CSS样式：#content:focus {outline:none;}

7. 8

   九.bt4插件的使用的注意点：

   js的使用及API的使用；

8. 依赖jquery,注意提前引入；

9. 单用：引入bootstrap.min.js或bootstrap.js，最好不要同时引用；

10. 在HTML中的数据属性；

11. 1.只能在单个元素上使用一套数据属性==>如：data-api

12. 2.禁用数据属性API方法：$(document).off('.data-api'); 为了指向特定的插件:$(document).off('.alert.data-api');alert为插件名

13. 3.编程化的API：

14. a)-('.btn.danger').button('toggle').addClass('fat')链式使用；

15. b)-所有的方法都能够接收一个可取舍的options对象、一个指向特定方法的字符串，或者不接收参数。 $('#myModal').modal() // 用默认值初始化插件 $('#myModal').modal({ keyboard: false }) // 用无键盘初始化插件 $('#myModal').modal('show') // 初始化并立即引用show

16. c)-默认设置 修改插件的Constructor.DEFAULTS对象，就可以修改插件的默认设置。如； $.fn.modal.Constructor.DEFAULTS.keyboard = false // 把模态窗口插件的`keyboard`选项的默认值设置为false。

17. d)-解决其他的调用冲突 你可以在插件上调用.noConflict以改变你想要改变的值。

18. e）-事件-自定义事件；

19. f)-过度---- 编译版的（或者瘦身过的）bootstrap.js，就不需要再调用这个文件了，因为已经有了

20. 9

    十.布局也与bt3不同：

    2列布局；col-sm-*(*代表1-12的占用列数)；包含在.row行里面； 五个网格等级：特小，小，中，大，特大（xs sm md lg xl）。 网格等级基于宽度的最小值，意味着它们应用到某一等级以及这一等级之上的所有（比如，.col-sm-4应用到小、中、大、特大设备）; 特小屏 34em / 480px小屏 ≥34em / 480px中屏 ≥45em / 720px大屏 ≥62em / 992px特大屏 ≥75em / 1200px 网格行为始终横向排布开始瓦解，在断点之上保持横向排布。 Container width无 (自动)34rem / 480px45rem / 720px60rem / 960px72.25rem / 1156px 类前缀.col-xs-.col-sm-.col-md-.col-lg-.col-xl- # 列格12 列间隙宽度30px (每列两侧各15px) 可嵌套性可以 可偏移性可以 列排序可以 ====== 预定义类； 横向排布： 列包裹：每一组超出的列，将成为一个单元，包裹入一个新行； 响应式列重置：解决用 class="clearfix hidden-sm-up"/块元素隔开； 重置位移：col-md-offset-*==>向右偏移多少列的位置； 列排序：col-md-push-*==>推 col-md-pull-*==>拉

21. 10

    十一.媒体对象：

    1.默认媒体对象：模板<div class="media"> <a class="media-left" href="#"> <img class="media-object" data-src="" alt="Generic placeholder image"> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla.<br/ > Nulla vel metus scelerisque ante sollicitudin commodo. <br/ > Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.<br/ > Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div> 2.可以被嵌套的 3.默认垂直对齐方式为:.media-top 其他方式：.media-top .media-middle .media-bottom 4.其他类名==》.media-heading===>媒体标题；.media-left,.media-right;左右， 5.媒体列表：.media-list一般放在这样的结构中 <ul class="media-list"> <li class="media">....</li>

22. 11

    十二.响应式工具； 可用的类；.hidden-md-up ===在md及md以上隐藏；其他类似； .hidden-md-down==在md及md以下隐藏；其他类似；

23. 12

    十三.内容排版：

    标题： .text-muted==自定义标题，重建小的次要标题； 显示标题：.display-4 .display-3 .display-2 .display-1 段落醒目：.lead 缩略语：.initialism实现小的字号；使用与《abbr》标签； 列表： 列表默认清除：.list-unstyle; 内联列表：list-inline; dl dt dd==s水平描述：.dl-horizontal; 较长条目可以使用.text-truncate达到省略号截断文本； ===图片： 响应式图片：class=.img-responsive alt="Responsive image"==两个一起； 图片形状：.img-rounded==圆角方形 .img-circle==圆形 .img-thumbnail==缩略图形 对齐图片： 浮动助手类：pull-left或pull-right 文本对齐类：使用.center-block img设置style为display:block; 外包div:加.text-center把div里面的img实现居中;

24. 13

    十四.图文框如实例：

    <figure class="figure"> <img data-src="holder.js/400x300" class="img-rounded" alt="A generic square placeholder."> <figcaption class="figure-caption">A caption for the above image./figcaption> </figure>