加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

twitter-bootstrap – Twitter Bootstrap 3如何改变2.3.2版本?

发布时间:2020-12-17 23:42:09 所属栏目:安全 来源:网络整理
导读:我自己学习的差异。到目前为止我想出了: span is now col :- there are three types of col ie .col- .col-sm- .col-lg- for phone,tablet and pc respectively. additional class 'row' 有什么更多的区别?来自已经完成研究的人。 解决方法 Bootstrap 3的
我自己学习的差异。到目前为止我想出了:
span is now col :- there are three types of col ie .col-    .col-sm-    .col-lg- for phone,tablet and pc respectively. 

additional class 'row'

有什么更多的区别?来自已经完成研究的人。

解决方法

Bootstrap 3的目标是移动优先。

>删除IE7和FF3.6支持。
>标准和响应CSS组合成一个单一的文件。
>重命名变量:重命名变量以使用破折号,而不是camelCase。例如,它现在是@ ??body-bg而不是@bodyBackground
>不再有@blue,@orange,而是@品牌主,@品牌成功和其他。然后,基于每个组件(例如,@ state-warning-text,@ btn-background-primary等)
>添加视网膜图像混合与.img-retina()
>添加新变量,如: – 更改@ component-active-bg,并自定义nav工具,下拉列表等的活动状态。

大修网格系统使其流动和移动优先。

>删除了单独的流体网格系统,容器和布局
>新的单网格系统使用.row(百分比而不是像素),(填充边距)和box-sizing:border-box。
>偏移仍然100%支持。
>而不是.span *和.offset *,我们现在分别使用.col- *和.col-offset- *。
>对微小设备(智能手机)使用.col- *类。对于小设备(平板电脑)使用.col-sm- *类
>添加.col-push- *和.col-pull- *修饰符类,以方便列源排序。
>删除专用表格网格类。
>建议在所有.container实例上使用“max-width”而不是“width”来帮助防止组件(如navbars)中的容器出现某些问题。

纽扣:

>默认灰色按钮需要两个classes-class =“btn btn-default”。
> Dropped .btn-inverse

形式:

>删除input-prepend和input-append为奇数.input-group
>丢弃.form搜索
>水平形式现在是移动优先的,意味着在<768px,元素被堆叠。在上面,元素是浮动的并且并排出现。
>复选框和无线电现在需要额外的
>而不是.radio.inline,你现在需要一个类,.radio-inline,直接在a上使用

图标

> Convert to Glyphicons v1.7 @ font-face并删除旧的PNG。
>所有类都以.glyphicon-而不是.icon-

标签:-

>使用父级的字体大小缩放标签
>丢弃.label-inverse

英雄单位到Jumbotron

>类从.hero-unit更改为.jumbotron
>标题的较轻的字体重量
>在响应视图中缩放字体大小。

Navs和Navbars

>删除.nav-list选项。替换为新的.list-group组件。
>删除对.navbar-search的支持
>默认导航栏及其子组件的大修样式:
>下拉菜单插入符(附加到实际菜单,而不是指示符)已被删除,以便下拉菜单平放在导航栏的边缘。
> Navbar垂直分隔线已经被带入了一个smidge,意味着它们不会延伸导航栏的整个高度。
>在导航栏上没有更多的框阴影或渐变。
>导航栏的高度从44像素增加到62像素(对于移动设备),50像素(对于桌面)。
>删除.navbar-inner并将相关样式移到.navbar
>已更改.navbar> .nav到.navbar-nav
>将.btn-navbar更改为.navbar-toggle
>将.brand更改为.navbar品牌

下拉列表: –

>在下拉菜单中删除子菜单。
>删除.nav-header并替换为.dropdown-header

模态: –

>不再需要使用.hide
>重新引入.modal打开的身体(所以我们可以nuke滚动那里)
>添加一对额外的标记(即.modal-dialog和.modal-content),所以我们可以滚动整个模态,而不是在模态中溢出一个部分。
>相关,.modal现在是包装器,而.modal-content是模态本身。这是所以我们仍然可以使用position:fixed,但是使模态相对定位,以便滚动移动整个模态,而不是它。
>添加了.modal-title,用于更为一致和有用的标题内容定位(以前这只是一个和选择器性能明智的吸引)。

旋转木马: –

>重新设计!上一个和下一个控件的较轻样式,以及轮播标题。
>更新转盘控制的所需标记。 .carousel-control类现在需要在其中包含前/后字符中的另一个元素。这些字符现在是Glyhpicons图标,用于改善在浏览器和设备之间的样式和定位。
指示器现在是中下对齐。
>字幕会加强为可选字段,默认情况下,会隐藏在移动视图上,然后针对 768像素视口显示。

上面的列表是为普通程序员。上一个答案对于比自己更好的程序员来说是非常好的。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读