Lists

所有lists-

，
和

-具备其margin-top删除和margin-bottom: 1rem。嵌套列表没有margin-bottom。

为了更简单的样式，清晰的层次结构和更好的间距，说明列表已更新margin。

Preformatted text

该

元素被重置为删除它margin-top并为其使用rem单位margin-bottom。

           

Tables

表格略微调整为样式，折叠边界，并确保始终一致text-align。对.table班级附加更改，边框，填充等。

Forms

各种表单元素已被重新引导，以实现更简单的基本样式。以下是一些最显着的变化：

• s没有边框，填充或边距，因此它们可以很容易地用作单个输入或输入组的包装。

• 与字段集一样，它也被重新设置为显示为各种标题。

• s被设置为display: inline-block允许margin应用。

• s，s，</code>s和<code><button></code>s主要通过Normalize处理，但Reboot 也会删除它们<code>margin</code>并设置<code>line-height: inherit</code>。</p></li> <li><p><code><textarea></code>s被修改为只能在垂直方向调整大小，因为水平调整大小通常会“破坏”页面布局。</p></li> </ul> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p>下面将演示这些更改以及更多内容。</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <h2>Misc elements</h2> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <h3>Address</h3> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p>该<code><address></code>元素被更新重置浏览器默认<code>font-style</code>的<code>italic</code>到<code>normal</code>。<code>line-height</code>现在也被继承了，并且<code>margin-bottom: 1rem</code>已被添加。<code><address></code>s是为了提供最近的祖先（或整个工作机构）的联系信息。通过结束行来保留格式<code><br></code>。</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <h3>Blockquote</h3> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p><code>margin</code>blockquotes上的默认值是<code>1em 40px</code>，所以我们重置它以<code>0 0 1rem</code>使其与其他元素更加一致。</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <h3>Inline elements</h3> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p>该<code><abbr></code>元件接收基本样式以使它在段落文本之间脱颖而出。</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <h2>HTML5<code>[hidden]</code>attribute</h2> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p>HTML5添加了一个名为的新的全局属性<code>[hidden]</code>，<code>display: none</code>默认情况下它的样式是。从PureCSS借鉴一个想法，我们通过改进默认设置<code>[hidden] { display: none !important; }</code>来帮助防止它<code>display</code>被意外覆盖。尽管<code>[hidden]</code>IE10本身并不支持，但CSS中的显式声明解决了这个问题。</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <pre class="prism-token token language-javascript"><input type="text" hidden></pre> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <h4>jQuery incompatibility</h4> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p><code>[hidden]</code>与jQuery<code>$(...).hide()</code>和<code>$(...).show()</code>方法不兼容。因此，我们目前并不特别赞同<code>[hidden]</code>用于管理<code>display</code>元素的其他技术。</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p>要仅仅切换元素的可见性，意味着它<code>display</code>没有被修改，并且元素仍然可以影响文档的流动，请<code>.invisible</code>改为使用该类。</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <h2>Click delay optimization for touch</h2> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p>传统上，触摸屏设备上的浏览器在“轻敲”（即手指/触笔从屏幕上抬起）和<code>click</code>事件被触发的时刻之间延迟约300ms 。这种延迟对于这些浏览器正确处理“双击缩放”手势是必要的，而不会在第一次“轻敲”后过早触发操作或链接，但它可能会使您的站点感觉稍微缓慢且无响应。</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p>大多数移动浏览器会自动优化此站点的300毫秒延迟，以便将该<code>width=device-width</code>媒体资源用作其响应元标记的一部分（也适用于禁用缩放功能的网站，例如<code>user-scalable=no</code>，尽管出于可访问性和可用性的原因，强烈建议您不要这样做）。这里最大的例外是Windows Phone 8.1上的IE11，以及iOS 9.3之前的 iOS Safari（以及任何其他基于iOS WebView的浏览器）。</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p>在支持触摸的笔记本电脑/台式机设备上，IE11和Microsoft Edge目前是唯一具有“双击缩放”功能的浏览器。由于所有桌面浏览器<code>width=device-width</code>都会忽略响应式元标记，因此使用此功能对延迟300毫秒不起作用。</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p>为了在桌面上的IE11和Microsoft Edge以及Windows Phone 8.1上的IE11中解决这个问题，Bootstrap明确地在所有交互元素（例如按钮和链接）上使用<code>touch-action:manipulation</code>CSS属性。该属性实质上禁用了这些元素的双击功能，消除了300ms的延迟。</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p>对于旧的iOS版本（9.3之前版本），建议的方法是使用其他脚本（如FastClick）明确解决延迟问题。</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p>有关更多详细信息，请参阅兼容性表以抑制触摸屏交互的300毫秒延迟。</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <pre class="prism-token token language-js">© 2011–2017 Twitter, Inc.</pre> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p>© 2011–2017 The Bootstrap Authors</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p>根据MIT许可证授权的代码。</p> </div> </div> <div class="doc-postil"> <div class="c-markdown"> <p>根据知识共享署名许可证v3.0获得许可的文档。</p> </div> </div> </div> </div> <div class="view-foot"> <div class="article-jump"> <span class="jump-up">前の記事：<a></a></span> <span class="jump-down">次の記事：<a></a></span> </div> <a class="view-backtop"><i class="icon-arrow-up2"></i></a> </div> </div> </div> </div> </div> </div> </div> <!--<i class="loading-image"> </i>--> <div id="languageslayer" style="display:none" class="flexColumn languageslayer"> <div class="lan-con"> <a href="javascript:;" onclick="setlang($(this))" data-value="zh-cn" class="chooselan ">简体中文(ZH-CN)</a> <a href="javascript:;" onclick="setlang($(this))" data-value="en" class="chooselan ">English(EN)</a> <a href="javascript:;" onclick="setlang($(this))" data-value="zh-tw" class="chooselan ">繁体中文(ZH-TW)</a> <a href="javascript:;" data-value="ja" class="chooselan checklan">日本語(JA)</a> <a href="javascript:;" onclick="setlang($(this))" data-value="ko" class="chooselan ">한국어(KO)</a> <a href="javascript:;" onclick="setlang($(this))" data-value="ms" class="chooselan ">Melayu(MS)</a> <a href="javascript:;" onclick="setlang($(this))" data-value="fr" class="chooselan ">Français(FR)</a> <a href="javascript:;" onclick="setlang($(this))" data-value="de" class="chooselan ">Deutsch(DE)</a> </div> </div> <div style="display:none"></div> </body> </html>