澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2019-06-29 19:59 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

威尼斯官网移动设备优先的前端开发框架

Respond.js 和 跨域(cross-domain) CSS 的问题

要是 Respond.js 和 CSS 文件被放在区别的域名或子域名上边(举例,使用CDN)时索要某些附加的设置。请参谋Respond.js 文书档案 获取详细音信。

不需求您:

  • 在你的散发中包罗Bootstrap源码或你对其进展的别的退换
  • 向Bootstrap项目交付你对Bootstrap的修改(固然我们鼓励你付出并回馈)

Bootstrap完整的认同包含在类型仓库中。

grunt (重新构建具备剧情并运转测量检验用例)

编写翻译并减弱 CSS 和 JavaScript 文件、营造文书档案站点、对文书档案做 HTML5 校验、重新生成定制工具所需的能源文件等,都亟需 Jekyll 工具。这几个唯有在你对 Bootstrap 深度商量时才有用。

Internet Explorer 8 和 9

Internet Explorer 8 和 9 是被接济的,不过,你要清楚,大多CSS3属性和HTML5成分 -- 比如,圆角矩形和投影 -- 是断定不被帮忙的。此外,Internet Explorer 8 需求Respond.js同盟才具促成对传播媒介询问(media query)的帮助。

CSS特性

Internet Explorer 8

Internet Explorer 9

border-radius

不支持

支持

box-shadow

不支持

支持

transform

不支持

支持,需带 -ms 前缀

transition

不支持

placeholder

不支持

请仿照效法Can I use...以获取详细的CSS3和HTML5表征在每家每户浏览器上的帮助景况。

对第三方组件的支撑

虽说大家并违规扶助其他第三方插件,我们仍旧提供一些建议,帮您防止或然在你的品类中会出现的难点。

Windows 8 中的 Internet Explorer 10 和 Windows Phone 8

Internet Explorer 10 并从未对 显示器的小幅度 和 视口(viewport)的宽度 进行区分,那就变成Bootstrap 中的媒体询问并不可能很好的发挥成效。为了消除这几个主题素材,你能够引进上边列出的这段 CSS 代码方今修复此难题:

复制

@-ms-viewport       { width: device-width; }

可是,那样做并不能对 Windows Phone 8 Update 3 (a.k.a. GDR3) 版本此前的配备起功用,由于那样做将造成Windows Phone 8 设备依照桌面浏览器的章程表现页面,而不是较窄的“手提式有线电话机”呈现格局,为了缓和那么些主题材料,还供给投入以下 CSS 和 JavaScript 代码来化解此难题

复制

@-webkit-viewport   { width: device-width; }@-moz-viewport      { width: device-width; }@-ms-viewport       { width: device-width; }@-o-viewport        { width: device-width; }@viewport           { width: device-width; }

复制

// Copyright 2014-2015 Twitter, Inc.// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)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)}

请查看 Windows Phone 8 and Device-Width 以掌握愈来愈多新闻。

作为提示,我们将地点的代码加入到了有着 Bootstrap 文档和实例页面中。

定制组件

有两种区别档案的次序的定制格局,不过,基本可以归为两类:轻量级定制深度定制。那二种艺术都有成都百货上千第三方案例可供参谋。

我们将轻量级定制概念为外观层面包车型大巴改换,举个例子修改现存Bootstrap组件的颜料和字体之类。推特翻译中心(由@mdo开垦)便是多少个很好地案例。上面就让大家看看那些网址是怎么样定制开关.btn-ttc的。

选择Bootstrap自带的开关,只需贰个简单易行的class就可以,即.btn。大家未来急需充实自身的class来为其做些修改,class名称叫.btn-ttc。以往就能够开支比较少的光阴做外观定制。

大家定制的开关如下:

<button type="button" class="btn btn-ttc">Save changes</button>

注意.btn-ttc是什么加多到标准的.btn class中的。

在定制的体制表中,扩充如下CSS代码:

/* 定制按钮  -------------------------------------------------- */    /* Override base .btn styles */  /* Apply text and background changes to three key states: default, hover, and active (click). */  .btn-ttc,  .btn-ttc:hover,  .btn-ttc:active {    color: white;    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);    background-color: #007da7;  }    /* Apply the custom-colored gradients */  /* Note: you'll need to include all the appropriate gradients for various browsers and standards. */  .btn-ttc {    background-repeat: repeat-x;    background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);    ...  }    /* Set the hover state */  /* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */  .btn-ttc:hover {    background-position: 0 -15px;  }

差十分少的话,就是从样式表代码中复制出必要修改的某些。

以下就是着力专业流程:

  • 对于每个须要定制的成分,在Bootstrap CSS文件(未压缩版)中找到其出现的职位。
  • 将索要定制的样式代码拷贝并粘贴到你和睦的文件中。比方,定制导航条(navbar)的背景(background),只须要拷贝.navbar样式。
  • 在你自身的样式表文件中期维修改拷贝过来的CSS代码。无需追加新的class或利用!important品质。尽量轻易就好。
  • 再一次上述过程,直到本人知足结束。

要是您熟练了轻量定制,再开始展览深度定制将会手到擒来。举个例子Karma网址,他们正是将Bootstrap作为三个CSS reset文件,并拓展了大气的修改,在那之中涉嫌到当量的干活。他们在定制进度中遵从了同样的规律:将Bootstrap的暗许样式表引进页面中,然后利用自身定制的样式。

浏览器缩放

页面缩放作用不可避免的会将某个零部件搞得一无可取,不光是Bootstrap,整个互联英特网的具备网址都以如此。针对实际难点,我们可能能够修复它(假如有至关重要的话,请先物色一下你的难点,看看是或不是已有化解方案,然后在向大家提交issue)。但是,大家更侧向于忽略这几个难题,由于那么些难点除了部分hack手段,一般未有直接的解决方案。

导航条上的下拉菜单

在 iOS 设备上,由于导航组件(nav)的纷纭的 z-indexing 属性,.dropdown-backdrop 成分并未有被选取。因而,为了关闭导航条上的下拉菜单,必须平素点击下拉菜单上的因素(大概别的此外能够触发 iOS 上 click 事件的因素)。

导航条

Super basic template that includes the navbar along with some additional content.

威尼斯官网 1

外加注意

Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and ourmobile first approach. Here's a partial list:

稍许v3.0中的多修改并不能够从外表直接看到。大家对基本class、关键样式和行事都开始展览了调度,使其越来越灵敏并且适应移动设备优先这一对象。上面是多少个局地列表:

  • 文件表单控件全体预设为百分之百幅度。用<div ></div>卷入输入框就可以调控器宽度。
  • .badge不再保留状态相关的class(-success、-primary等)。
  • .btn必须和 .btn-default一块使用本事获得“私下认可”样式的开关。
  • .container.row当前是依据百分比定义的升幅。
  • 默许情形下,图片不有所由响应式性格,须求使用.img-responsive才能让<img>贯彻响应式可变大小。
  • 图标,.glyphicon,演化为字体Logo。各样图标都供给几个基本class和贰个表示一定Logo的class(举例,.glyphicon .glyphicon-asterisk
  • 与输入组件被移除,建议选取推特 Typeahead组件。
  • 模态框组件的HTML结构产生了异常的大的改动。.modal-header.modal-body.modal-footer一对近些日子带有在了.modal-content.modal-dialog中,为的是加强活动器械上的体裁和行为特征。
  • The HTML loaded by the remote modal option is now injected into the .modal instead of into the .modal-body. This allows you to also easily vary the header and footer of the modal, not just the modal body.
  • JavaScript事件近来全部都采纳了命名空间。比如,模态框的"show"事件的称呼为'show.bs.modal'。标签页组件的"shown"事件名字为'shown.bs.tab',还应该有许多其余事件名称也是类似。

能够在Bootply社区网址猎取越来越多进级至v3.0的新闻和代码示例。

grunt watch (监测文件的退换,并运转内定的 Grunt 职分)

监测 Less 源码文件的变动,并自动重新将其编写翻译为 CSS 文件。

超出范围和滚动

<body>元素在iOS和Android上对overflow: hidden的支撑很单薄。结果正是,在那三种配备上的浏览器中,当你滚动显示器超越模态框的最上端或底层时, <body>中的内容将上马趁机滚动。

禁止你:

  • 在未有合适的权位申明的景况下再度分发Bootstrap的专擅部分
  • 以其余方法(证明或暗中表示照片墙已经为您的分发背书)使用Facebook具有的别的商标
  • 以其它方式(注解或暗中提示你创立了此软件)使用其它推特具备的商标

Bootstrap 源码

Bootstrap 源码蕴涵了事先编写翻译的 CSS、JavaScript 和Logo字体文件,并且还会有LESS、JavaScript 和文书档案的源码。具体来讲,主要文件组织结构如下:

复制

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/js/ 和 fonts/ 目录分别包蕴了 CSS、JS 和字体Logo的源码。dist/ 目录包罗了地方所说的预编写翻译 Bootstrap 包内的具备文件。docs/ 包罗了颇具文书档案的源码文件,examples/ 目录是 Bootstrap 官方提供的实例工程。除了这一个,其余文件还包括 Bootstrap 安装包的概念文件、许可证文件和编写翻译脚本等。

定制Bootstrap

一旦您将Bootstrap作为你所依附的工具库中的一个组成都部队分,那么,对Bootstrap实行定制将是充裕好的章程。那样做能够保证未来的提拔更便于。

倘使您将下载下来的Bootstrap样式杭剧本文件引进到页面内,你就足以定制那一个零件。那亟需再次创下造一份新的样式表(能够是LESS,大概是CSS)用于覆盖Bootstrap中已经存在的体制。

压缩版依旧非压缩版?

只有你需求阅读CSS代码,不然请使用压缩版。当中包蕴的代码是同样的,只是更简单了。压缩过的体制文件能够减低带宽的占用,尤其对线上景况有益。

到此,包罗所需的Bootstrap组件和HTML内容就能够成立生成页面所需的模版。

Respond.js 与 file:// 协议

出于浏览器的酒泉机制,Respond.js 不可能在经过 file:// 协议(展开本地HTML文件所用的说道)访问的页面上宣布正常的意义。假使急需测试IE8 上面包车型地铁响应式特性,务必通过 http 协议访问页面(比方搭建 apache、nginx 等)。请仿照效法Respond.js 文档获取更加多新闻。

最简页面

唯有一对最基本的事物:引进了未压缩版的CSS和JavaScript文件,页面只有三个container容器。

威尼斯官网 2

虚构键盘

再有,尽管您正在模态框上面输入内容 -- iOS还应该有多少个制图上的bug,当触发虚构键盘之后,其不会更新fixed成分的任务。这里有几种缓和方案,包罗将fixed成分调换为position: absolute或运营二个电磁打点计时器手工业改正其任务。那几个从没进入Bootstrap中,由此,供给由你和睦选用最佳的消除方案并投入到您的使用中。

grunt dist (仅编译 CSS 和 JavaScript 文件)

双重生成 /dist/ 目录,并将编写翻译压缩后的 CSS 和 JavaScript 文件放入那个目录中。作为一名 Bootstrap 用户,抢先50%动静下您只需求实行那二个限令。

Sticky footer with navbar

Attach a footer to the bottom of the viewport with a fixed navbar at the top.

威尼斯官网 3

定制Bootstrap

设若你将Bootstrap作为你所依赖的工具库中的三个组成都部队分,那么,对Bootstrap进行定制将是相当好的主意。那样做能够有限支撑以后的升官更便于。

比如你将下载下来的Bootstrap样式宁海平调本文件引进到页面内,你就足以定制那么些零件。那要求再创立一份新的样式表(可以是LESS,只怕是CSS)用于覆盖Bootstrap中一度存在的体制。

非得服从:

  • Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works

浏览器缩放

页面缩放功能不可幸免的会将有些零部件搞得一无可取,不光是Bootstrap,整个互连网络的持有网址都是那样。针对具体难点,大家也许能够修复它(假诺有必不可缺的话,请先物色一下你的题目,看看是或不是已有缓慢解决方案,然后在向大家提交issue)。不过,大家更赞成于忽略这一个标题,由于那几个题目除了有的hack花招,一般未有间接的缓和方案。

浏览器帮助

Bootstrap的对象是在新型的桌面和平运动动浏览器上有最好的显现,也正是说,在较老旧的浏览器上恐怕会产生一些零部件表现出的体裁有个别不一致,然而意义是完全的。

IE 包容格局

Bootstrap 不帮助 IE 古老的相称方式。为了让 IE 浏览器运维最新的渲染形式下,提议将此 <meta> 标签进入到你的页面中:

复制

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

按 F12 键打开 IE 的调整工具,就能够观望 IE 当前的渲染方式是何等。

此 meta 标签被含有在了有着 Bootstrap 文书档案和实例页面中,为的便是在各类被支持的 IE 版本中具有最佳的绘图效果。

请参考 本条发表在 StackOverflow 上的题材。

剥夺响应式布局的步子

  1. 移除此处提到的(或然不要增添)viewport <meta>
  2. 通过为.container安装一个width值从而覆盖框架的暗中认可width设置,例如width: 970px !important;。请确定保障那几个设置任何放在暗中同意的Bootstrap CSS前边。注意,你也足以略去!important
  3. 万一应用了导航条,要求移除全体导航条的折叠和进展行为。
  4. 对于栅格布局,额外增添.col-xs-* classe或交换掉.col-md-*.col-lg-*。不要担忧,针对超小显示器设备的栅格系统能够在装有分辨率的情况下开始展览。

针对IE8须求额外引进Respond.js文件 (由于照旧有媒体询问代码,由此还索要做拍卖)。那样就剥夺了Bootstrap对小荧屏设备的响应式帮助。

标题嵌套

当标题嵌套时(<h1> - <h6>),你的文书档案的主题目应该是<h1>威尼斯官网,。随后的标题逻辑上就活该运用<h2> - <h6>,这样,荧屏阅读器就能够组织出页面包车型客车开始和结果列表。

Learn more at HTML CodeSniffer and Penn State's AccessAbility.

Internet Explorer 8 与 Respond.js

在开辟意况和生育(线上)碰着亟待支持 Internet Explorer 8 时,请务必注意上边给出的告诫。

Respond.js 和@import

Respond.js 不接济通过 @import 引进的CSS文件。比如,Drupal 一般被布置为经过 @import 引进CSS文件,Respond.js对其将不能起到职能。 请参照他事他说加以考察Respond.js 文书档案获取越来越多新闻。

 

Internet Explorer 8 与 @font-face

当 @font-face 与 :before 在 IE8 下一同选取时会出现难点。由于 Bootstrap 对 Glyphicons 的体裁设置使用了这一结缘措施,假诺有个别页面被浏览器缓存了,并且此页面不是经过点击“刷新”按键或通过 iframe 加载的,那么就能产生字体文件并未有加载的意况下就从头绘制此页面。当鼠标滑过页面(body)时,页面上的一点Logo就能够显现,鼠标滑过其余未有显现的Logo时,这几个Logo就能够显得出来了。请参照他事他说加以调查 issue #13863 精通详细音讯。

案例

上边那么些案例都是依附上边给出的主导模版并构成Bootstrap组件制作的。后续我们还有只怕会讲课如何定制这么些零件。

威尼斯官网 4

许可证FAQ

Bootstrap遵守Apache 2许可证开始展览分发,版权归 推文(Tweet)二〇一一全数。总结为以下几点:

Bootstrap 源码

Less、JavaScript 和 字体文件的源码,并且包罗文书档案。急需 Less 编写翻译器和局地设置工作

下载源码

非响应式的Bootstrap

循序渐进我们付出的不二诀要得以很轻巧禁止使用Bootstrap的响应式本性。

威尼斯官网 5

从2.x升级到3.0版本

Bootstrap 3并不向后十三分Bootstrap v2.x。上面章节列出的剧情能够看成从v2.x荣升到v3.0的通用指南。假若要求愈来愈多消息,能够查阅更新记录那篇官方博文。

Respond.js 与 @import 指令

Respond.js 不支持通过 @import 指令所引进的 CSS 文件。比方,Drupal 一般被布署为通过 @import 指令引进CSS文件,Respond.js 对其将不能够起到职能。请参考 Respond.js 文档赢得更加多音讯。

恒定地方的导航条

Super basic template with a fixed top navbar along with some additional content.

威尼斯官网 6

跨越范围和滚动

<body>元素在iOS和Android上对overflow: hidden的援助很单薄。结果正是,在那二种道具上的浏览器中,当您滚动显示屏当先进模范态框的最上端或尾巴部分时, <body>中的内容将起来趁机滚动。

富含的从头到尾的经过

Bootstrap 提供了二种样式的压缩包,在下载下来的削减包内能够看看以下目录和文件,这个文件遵照连串放到了分裂的目录内,并且提供了压缩与未压缩二种版本。

登录页面

基本的记名页面,使用到了自定义的表单布局和安排性。

威尼斯官网 7

可访问性

Bootstrap遵从统一的web规范,别的,通过做一些微量的退换,还足以让动用AT的人工胎盘早剥访问你的站点。

明确命令禁止响应式性情的 Bootstrap 模版

咱俩早就依据地方的步骤制作了一份案例。细心阅读其源码并对照上边的步调推行一下呢。

非响应式布局实例

被帮忙的浏览器

特别注意,我们不懈补助那几个浏览器的风行版本:

  • Chrome (Mac、Windows、iOS和Android)
  • Safari (只支持Mac和iOS版,Windows版已经基本死掉了)
  • Firefox (Mac、Windows)
  • Internet Explorer
  • Opera (Mac、Windows)

Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表现也是很不利的,即便咱们不对其张开合法帮忙。

Safari对百分比数字凑整的标题

流行的Mac版Safari浏览器所富含的绘图引擎对于拍卖.col-*-1所对应的非常长的比例小数存在bug,那就象征,要是你在一行(row)之中定义了11个单身的列(.col-*-1),你就晤面到这一行比任何行要短一些。大家脚下消除不了这几个难题(see #9282),可是你能够幸免:

  • 为结尾一列增加.pull-right,将其暴力向右对齐
  • 手动调解百分比数字,让其针对性Safari表现越来越好(那比第一种格局更困苦)

小编们将会三番七次追踪此主题素材,假如有更简便易行的缓和方案,大家会更新代码。

Internet Explorer 8 和 9

Internet Explorer 8 和 9 是被协理的,不过,你要精通,繁多 CSS3 属性和 HTML5 成分 -- 举例,圆角矩形和投影 -- 是早晚不被援助的。其它, Internet Explorer 8 需要 Respond.js 同盟手艺兑现对传播媒介询问(media query)的帮助。

Feature

Internet Explorer 8

Internet Explorer 9

border-radius

 不支持

 支持

box-shadow

 不支持

 支持

transform

 不支持

 支持, with -ms prefix

transition

 不支持

placeholder

 不支持

请参考 Can I use... 以得到详细的 CSS3 和 HTML5 特性在一一浏览器上的支持情况。

大屏轮播

定制了导航条和轮播组件,并增加了部分自定义的新组件。

威尼斯官网 8

class的显要变化

报表中列出了v2.x 和 v3.0时期样式表的改变。

Bootstrap 2.x Bootstrap 3.0
.container-fluid .container
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.nav-collapse .navbar-collapse
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.alert-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop .visible-md
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop .hidden-md
.input-small .input-sm
.input-large .input-lg
.control-group .form-group
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
.input-prepend .input-append .input-group
.add-on .input-group-addon
.thumbnail .img-thumbnail
ul.unstyled .list-unstyled
ul.inline .list-inline
.muted .text-muted
.text-error .text-danger
.table .error .table .danger
.bar .progress-bar
.bar-* .progress-bar-*
.accordion .panel-group
.accordion-group .panel .panel-default
.accordion-heading .panel-heading
.accordion-body .panel-collapse
.accordion-inner .panel-body
.alert-error .alert-danger

Android 系统默许浏览器

Android 4.1 (以至一些较新本子)系统的私下认可浏览器棉被服装置为私下认可展开页面包车型大巴应用程序(分歧于 Chrome)。不幸的是, 一般景观下,那些浏览器有过多bug以及和CSS标准不雷同的地点。

Jumbotron

Build around the jumbotron with a navbar and some basic grid columns.

威尼斯官网 9

模态框和移动设备

许可证 FAQ

Bootstrap 遵循 MIT 许可证开始展览发表,二零一四 Twitter版权全部。归纳为以下几点:

压缩版照旧非压缩版?

除非您必要阅读CSS代码,不然请使用压缩版。当中含有的代码是一模一样的,只是更不难了。压缩过的体制文件能够降低带宽的占领,极其对线上情形有益。

到此,蕴涵所需的Bootstrap组件和HTML内容就可以创设生成页面所需的模板。

Internet Explorer 8 与 box-sizing

IE8不可能完全援助box-sizing: border-box;min-widthmax-widthmin-heightmax-height一起使用。由于此原因,从Bootstrap v3.0.1本子先导,大家不再为.container使用max-width

接下来在命令行中输入以下命令:

  1. 在全局意况中装置 grunt-cli :npm install -g grunt-cli 。
  2. 进入 /bootstrap/ 根目录,然后施行 npm install 命令。npm 将读取 package.json 文件并机关安装此文件中列出的有着被正视的扩展包。

上述手续完毕后,你就足以运作 Bootstrap 所提供的顺序 Grunt 命令了。

剥夺响应式天性的Bootstrap模版

咱俩早已根据地点的手续制作了一份案例。细心阅读其源码并比较上边的步调实施一下呢。

 

被移除的class

以下列出的页面成分已经在v3.0版本中被去除或涂改。

页面元素 从2.x版本中去除 3.0版本中对应的元素
Form actions .form-actions N/A
Search form .form-search N/A
Fluid container .container-fluid .container (no more fixed grid)
Fluid row .row-fluid .row (no more fixed grid)
Controls wrapper .controls N/A
Controls row .controls-row .row or .form-group
Navbar inner .navbar-inner N/A
Navbar vertical dividers .navbar .divider-vertical N/A
Dropdown submenu .dropdown-submenu N/A
Tab alignments .tabs-left .tabs-right.tabs-below N/A
Nav lists .nav-list .nav-header No direct equivalent, but List groups and .panel-groups are similar.

超过范围和滚动

<body> 元素在 iOS 和 Android 上对 overflow: hidden 的支撑很单薄。结果便是,在那二种配备上的浏览器中,当您滚动显示器超越模态框的顶上部分或底层时,<body> 中的内容将初始趁机滚动。

可访问性

Bootstrap坚守统一的web规范,其它,通过做一些微量的改造,仍是可以够让使用AT的人群访问你的站点。

定制组件

有两种区别档期的顺序的定制格局,但是,基本能够归为两类:轻量级定制纵深定制。那三种办法都有为数十分多第三方案例可供参谋。

我们将轻量级定制概念为外观层面包车型大巴改换,举个例子修改现存Bootstrap组件的颜料和字体之类。推特(Twitter)翻译主题 (由@mdo开采)正是三个很好地案例。上面就让大家看看那一个网址是怎样定制按键.btn-ttc的。

动用Bootstrap自带的开关,只需二个简易的class就可以,即.btn。大家现在亟需充实谐和的class来为其做些修改,class名为.btn-ttc。现在就足以开支相比少的年月做外观定制。

大家定制的开关如下:

<button type="button" class="btn btn-ttc">Save changes</button>

注意.btn-ttc是何等增添到规范的.btn class中的。

在定制的体制表中,扩张如下CSS代码:

/* 定制按钮  -------------------------------------------------- */    /* Override base .btn styles */  /* Apply text and background changes to three key states: default, hover, and active (click). */  .btn-ttc,  .btn-ttc:hover,  .btn-ttc:active {    color: white;    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);    background-color: #007da7;  }    /* Apply the custom-colored gradients */  /* Note: you'll need to include all the appropriate gradients for various browsers and standards. */  .btn-ttc {    background-repeat: repeat-x;    background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);    ...  }    /* Set the hover state */  /* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */  .btn-ttc:hover {    background-position: 0 -15px;  }

简言之来讲,正是从体制表代码中复制出供给修改的部分。

以下正是宗旨职业流程:

  • 对此每一种须要定制的因素,在Bootstrap CSS文件(未压缩版)中找到其现出的职责。
  • 将索要定制的样式代码拷贝并粘贴到您自身的公文中。举例,定制导航条(navbar)的背景(background),只供给拷贝.navbar样式。
  • 在您和谐的样式表文件中期维修改拷贝过来的CSS代码。不须要追加新的class或接纳!important属性。尽量轻便就好。
  • 双重上述进度,直到自个儿称心如意截至。

若是您熟习了轻量定制,再实行深度定制将会手到擒来。比如Karma网址,他们就是将Bootstrap作为八个CSS reset文件,并打开了多量的改变,在那之中涉嫌到当量的做事。他们在定制进度中根据了同一的原理:将Bootstrap的暗中认可样式表引入页面中,然后使用本人定制的样式。

禁绝响应式布局有如下几步:

  1. 移除 此 CSS 文档中涉及的装置浏览器视口(viewport)的竹签:<meta>
  2. 通过为 .container 类设置一个 width 值从而覆盖框架的暗中同意 width 设置,举例 width: 970px !important; 。请保管那几个设置任何身处暗中同意的 Bootstrap CSS 文件的末尾。注意,假使你把它放到媒体询问中,也能够略去!important 。
  3. 假设使用了导航条,需求移除全体导航条的折叠和进行行为。
  4. 对此栅格布局,额外扩展 .col-xs-* 类或沟通掉 .col-md-* 和 .col-lg-*。 不要顾忌,针对超小荧屏设备的栅格系统可以在具备分辨率的条件下打开。

本着 IE8 如故须求极度引进 Respond.js 文件(由于照旧选取了浏览器对传媒询问(media query)的支撑,由此还须要做拍卖)。这样就剥夺了 Bootstrap 对运动道具的响应式帮衬。

Offcanvas

Build a toggleable off-canvas navigation menu for use with Bootstrap.

威尼斯官网 10

扩展阅读

  • "HTML Codesniffer" bookmarklet for identifying accessibility issues
  • The A11Y Project
  • MDN accessibility documentation

禁止响应式布局

Bootstrap 会自动帮你针对分化的显示器尺寸调治你的页面,使其在各种尺寸的荧屏上展现不错。上边大家列出了哪些禁止使用这一特色,就像这几个非响应式布局实例页面同样。

虚构键盘

还会有,若是您正在模态框上面输入内容 -- iOS还应该有四个制图上的bug,当触发虚构键盘之后,其不会更新fixed成分的地方。这里有三种缓和方案,包含将fixed成分转换为position: absolute或启动三个计时器手工业改进其地方。那一个未有投入Bootstrap中,由此,需求由你协和挑选最佳的消除方案并参预到您的运用中。

IE包容形式

Bootstrap不扶助IE的合作形式。为了让IE浏览器运营最新的渲染方式,提出将此 <meta> 标签进入到你的页面中:

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

参见StackOverflow上对此主题素材的解答。

 

栅格系统

五个栅格系统布局的案例展现。

威尼斯官网 11

允许你:

  • 随便的下载并选择一些或完整的Bootstrap框架,允许用于私人、公司内部或买卖目标
  • 将Bootstrap放入你协和成立的安装包或分发中

用于生产境遇的 Bootstrap

编写翻译并收缩后的 CSS、JavaScript 和字体文件。不含有文书档案和源码文件。

下载 Bootstrap

被移除的class

以下列出的页面成分已经在v3.0版本中被删去或修改。

页面元素 从2.x版本中去除 3.0版本中对应的元素
Form actions .form-actions N/A
Search form .form-search N/A
Form group with info .control-group.info N/A
Fluid container .container-fluid .container (no more fixed grid)
Fluid row .row-fluid .row (no more fixed grid)
Controls wrapper .controls N/A
Controls row .controls-row .row or .form-group
Navbar inner .navbar-inner N/A
Navbar vertical dividers .navbar .divider-vertical N/A
Dropdown submenu .dropdown-submenu N/A
Tab alignments .tabs-left .tabs-right .tabs-below N/A
Nav lists .nav-list .nav-header No direct equivalent, but List groups and .panel-groups are similar.

>Windows 8 中的 Internet Explorer 10 和 Windows Phone 8

Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:

Internet Explorer 10并从未将屏幕的大幅视口(viewport)的宽度分别开,那就招致Bootstrap中的媒体询问并无法很好的发挥成效。为了减轻这几个主题素材,你能够引入下边列出的这段CSS暂且修复此难题:

@-ms-viewport       { width: device-width; }

可是,那样做会招致Windows Phone 8 设备依照桌面浏览器的点子彰显页面,而不是较窄的“手提式有线电话机”突显格局。为了缓解这么些难点,还亟需参与以下CSS和JavaScript代码,直到微软修复此主题素材

@-webkit-viewport   { width: device-width; }  @-moz-viewport      { width: device-width; }  @-ms-viewport       { width: device-width; }  @-o-viewport        { width: device-width; }  @viewport           { width: device-width; }

if (navigator.userAgent.match(/IEMobile/10.0/)) {    var msViewportStyle = document.createElement("style")    msViewportStyle.appendChild(      document.createTextNode(        "@-ms-viewport{width:auto!important}"      )    )    document.getElementsByTagName("head")[0].appendChild(msViewportStyle)  }

请查看Windows Phone 8 and Device-Width以询问愈来愈多消息。

用作提示,大家将其加入到Bootstrap文书档案中作为叁个案例。

Bootstrap 插件全体依据 jQuery

请注意,Bootstrap 的装有 JavaScript 插件都重视 jQuery,所以 jQuery 必须在 Bootstrap 以前引进,就像是在骨干模版中所展现的一致。在 bower.json 文件中 列出了 Bootstrap 所支撑的 jQuery 版本。

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:威尼斯官网移动设备优先的前端开发框架

关键词: 澳门威利斯人 bootstrap