电脑
subbline编辑器练习
创建一个项目目录文件：里面包含css，image,js,等存储资源的文件夹；bootstrap4.0注意的一些知识点；
一.浏览器支持IE9以上；及支持现代主流版本的浏览器；bt3支持8，现在bt4不支持IE8；二.移动端优先；三.IE兼容模式：
四.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) }
五.其他注意点及方法：使用的一些注意点及解决方法 溢出和滚动： 虚拟键盘： 导航下拉：=ios中关闭导航栏的下拉菜单，你必须直接点击下拉菜单元素 浏览器缩放： 移动设备上的:hover/:focus粘性处理’ 安卓内置浏览器：==安卓内置浏览器不会显示边缘控件,如下处理；
六.bt4使用的是弹性布局flexbox，display:flex;的方式布局；这一点与Bt3不同；
七.易用性：组件==通过role及aria属性实现；例如role='group'按钮组；role='toolbar'工具栏;
八.跳过导航的处理：a.解决ch和ie的问题，如果需要保证那些被跳过的锚链接是能够得到焦点的， 你只需要在代码中添加 tabindex =”-1”来实现这一点。b.你可能想显式地禁止一个锚链接出现一个可视的焦点迹象 （特别是当前Chrome中，带有tabindex='-1'的元素，当它们被鼠标点击到了之后也会得到焦点）， 你只需要添加这么一个CSS样式：#content:focus {outline:none;}
九.bt4插件的使用的注意点：js的使用及API的使用； 依赖jquery,注意提前引入； 单用：引入bootstrap.min.js或bootstrap.js，最好不要同时引用； 在HTML中的数据属性； 1.只能在单个元素上使用一套数据属性==>如：data-api 2.禁用数据属性API方法：$(document).off('.data-api'); 为了指向特定的插件:$(document).off('.alert.data-api');alert为插件名 3.编程化的API： a)-('.btn.danger').button('toggle').addClass('fat')链式使用； b)-所有的方法都能够接收一个可取舍的options对象、一个指向特定方法的字符串，或者不接收参数。 $('#myModal').modal() // 用默认值初始化插件 $('#myModal').modal({ keyboard: false }) // 用无键盘初始化插件 $('#myModal').modal('show') // 初始化并立即引用show c)-默认设置 修改插件的Constructor.DEFAULTS对象，就可以修改插件的默认设置。如； $.fn.modal.Constructor.DEFAULTS.keyboard = false // 把模态窗口插件的`keyboard`选项的默认值设置为false。 d)-解决其他的调用冲突 你可以在插件上调用.noConflict以改变你想要改变的值。 e）-事件-自定义事件； f)-过度---- 编译版的（或者瘦身过的）bootstrap.js，就不需要再调用这个文件了，因为已经有了
十.布局也与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 / 480px 45rem / 720px 60rem / 960px 72.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-*==>拉
十一.媒体对象：1.默认媒体对象：模板
Media heading
Cras sit amet nibh libero, in gravida nulla.Nulla vel metus scelerisque ante sollicitudin commodo.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
- ....
十二.响应式工具； 可用的类；.hidden-md-up ===在md及md以上隐藏；其他类似； .hidden-md-down==在md及md以下隐藏；其他类似；
十三.内容排版：标题： .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实现居中;
十四.图文框如实例：