下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。
内存溢出小编现在分享给大家，也给大家做个参考。
概览 HTML5 文档类型<!DOCTYPE HTML> <HTML lang="zh-CN"> ... </HTML>移动设备优先
<Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1">
<Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1,maximum-scale=1,user-scalable=no">排版与链接 为body元素设置background-color: #fff; 使用@Font-family-base、@Font-size-base和@line-height-basea变量作为排版的基本参数 为所有链接设置了基本颜色@link-color，并且当链接处于:hover状态时才添加下划线 normalize.CSS 布局容器
<div class="container"> ... </div>
<div class="container-fluID"> ... </div>栅格系统 简介 “行（row）”必须包含在.container（固定宽度）或.container-fluID（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 通过“行（row）”在水平方向创建一组“列（column）”。 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。 类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 通过为“列（column）”设置padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何.col-lg-*不存在， 也影响大屏幕设备。 媒体查询
/* 超小屏幕（手机，小于 768px） */ /* 没有任何媒体查询相关的代码，因为这在 bootstrap 中是默认的（还记得 bootstrap 是移动设备优先的吗？） */ /* 小屏幕（平板，大于等于 768px） */ @media (min-wIDth: @screen-sm-min) { ... } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-wIDth: @screen-md-min) { ... } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-wIDth: @screen-lg-min) { ... }
@media (max-wIDth: @screen-xs-max) { ... } @media (min-wIDth: @screen-sm-min) and (max-wIDth: @screen-sm-max) { ... } @media (min-wIDth: @screen-md-min) and (max-wIDth: @screen-md-max) { ... } @media (min-wIDth: @screen-lg-min) { ... }栅格参数
| 超小屏幕手机 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面显示器 (≥992px) | 大屏幕大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
| .container最大宽度 | None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>实例：流式布局容器
<div class="container-fluID"> <div class="row"> ... </div> </div>实例：移动设备和桌面屏幕 .col-xs-12 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-xs-6
<!-- Stack the columns on mobile by making one full-wIDth and the other half-wIDth --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wIDe on mobile and bump up to 33.3% wIDe on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wIDe,on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>实例：手机、平板、桌面 .col-xs-12 .col-sm-6 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>实例：多余的列（column）将另起一行排列 .col-xs-9 .col-xs-4
Since 9 + 4 = 13 > 12,this 4-column-wIDe div gets wrapped onto a new line as one contiguous unit. .col-xs-6
Subsequent columns continue along the new line.
<div class="row"> <div class="col-xs-9">.col-xs-9</div> <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12,this 4-column-wIDe div gets wrapped onto a new line as one contiguous unit.</div> <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> </div>响应式列重置 .col-xs-6 .col-sm-3
Resize your vIEwport or check it out on your phone for an example. .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3
<div class="row"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required vIEwport --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>
<div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div> </div>列偏移 .col-md-4 .col-md-4 .col-md-offset-4 .col-md-3 .col-md-offset-3 .col-md-3 .col-md-offset-3 .col-md-6 .col-md-offset-3
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>嵌套列 Level 1: .col-sm-9 Level 2: .col-xs-8 .col-sm-6 Level 2: .col-xs-4 .col-sm-6
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>列排序 .col-md-9 .col-md-push-3 .col-md-3 .col-md-pull-9
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>Less mixin 和变量 变量
@grID-columns: 12; @grID-gutter-wIDth: 30px; @grID-float-breakpoint: 768px;mixin
// Creates a wrapper for a serIEs of columns .make-row(@gutter: @grID-gutter-wIDth) { // Then clear the floated columns .clearfix(); @media (min-wIDth: @screen-sm-min) { margin-left: (@gutter / -2); margin-right: (@gutter / -2); } // Negative margin nested rows out to align the content of columns .row { margin-left: (@gutter / -2); margin-right: (@gutter / -2); } } // Generate the extra small columns .make-xs-column(@columns; @gutter: @grID-gutter-wIDth) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate wIDth based on number of columns available @media (min-wIDth: @grID-float-breakpoint) { float: left; wIDth: percentage((@columns / @grID-columns)); } } // Generate the small columns .make-sm-column(@columns; @gutter: @grID-gutter-wIDth) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate wIDth based on number of columns available @media (min-wIDth: @screen-sm-min) { float: left; wIDth: percentage((@columns / @grID-columns)); } } // Generate the small column offsets .make-sm-column-offset(@columns) { @media (min-wIDth: @screen-sm-min) { margin-left: percentage((@columns / @grID-columns)); } } .make-sm-column-push(@columns) { @media (min-wIDth: @screen-sm-min) { left: percentage((@columns / @grID-columns)); } } .make-sm-column-pull(@columns) { @media (min-wIDth: @screen-sm-min) { right: percentage((@columns / @grID-columns)); } } // Generate the medium columns .make-md-column(@columns; @gutter: @grID-gutter-wIDth) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate wIDth based on number of columns available @media (min-wIDth: @screen-md-min) { float: left; wIDth: percentage((@columns / @grID-columns)); } } // Generate the medium column offsets .make-md-column-offset(@columns) { @media (min-wIDth: @screen-md-min) { margin-left: percentage((@columns / @grID-columns)); } } .make-md-column-push(@columns) { @media (min-wIDth: @screen-md-min) { left: percentage((@columns / @grID-columns)); } } .make-md-column-pull(@columns) { @media (min-wIDth: @screen-md-min) { right: percentage((@columns / @grID-columns)); } } // Generate the large columns .make-lg-column(@columns; @gutter: @grID-gutter-wIDth) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate wIDth based on number of columns available @media (min-wIDth: @screen-lg-min) { float: left; wIDth: percentage((@columns / @grID-columns)); } } // Generate the large column offsets .make-lg-column-offset(@columns) { @media (min-wIDth: @screen-lg-min) { margin-left: percentage((@columns / @grID-columns)); } } .make-lg-column-push(@columns) { @media (min-wIDth: @screen-lg-min) { left: percentage((@columns / @grID-columns)); } } .make-lg-column-pull(@columns) { @media (min-wIDth: @screen-lg-min) { right: percentage((@columns / @grID-columns)); } }实例展示
.wrapper { .make-row(); } .content-main { .make-lg-column(8); } .content-secondary { .make-lg-column(3); .make-lg-column-offset(1); }
<div class="wrapper"> <div class="content-main">...</div> <div class="content-secondary">...</div> </div>排版 标题
| h1. bootstrap heading | Semibold 36px |
| h2. bootstrap heading | Semibold 30px |
| h3. bootstrap heading | Semibold 24px |
| h4. bootstrap heading | Semibold 18px |
| h5. bootstrap heading | Semibold 14px |
| h6. bootstrap heading | Semibold 12px |
<h1>h1. bootstrap heading</h1> <h2>h2. bootstrap heading</h2> <h3>h3. bootstrap heading</h3> <h4>h4. bootstrap heading</h4> <h5>h5. bootstrap heading</h5> <h6>h6. bootstrap heading</h6>
| h1. bootstrap headingSecondary text |
| h2. bootstrap headingSecondary text |
| h3. bootstrap headingSecondary text |
| h4. bootstrap headingSecondary text |
| h5. bootstrap headingSecondary text |
| h6. bootstrap headingSecondary text |
<h1>h1. bootstrap heading <small>Secondary text</small></h1> <h2>h2. bootstrap heading <small>Secondary text</small></h2> <h3>h3. bootstrap heading <small>Secondary text</small></h3> <h4>h4. bootstrap heading <small>Secondary text</small></h4> <h5>h5. bootstrap heading <small>Secondary text</small></h5> <h6>h6. bootstrap heading <small>Secondary text</small></h6>页面主体
<p>...</p>中心内容
<p class="lead">...</p>使用 Less 工具构建 内联文本元素 Marked text
You can use the mark tag to <mark>highlight</mark> text.被删除的文本
<del>This line of text is meant to be treated as deleted text.</del>无用文本
<s>This line of text is meant to be treated as no longer accurate.</s>插入文本
<ins>This line of text is meant to be treated as an addition to the document.</ins>带下划线的文本
<u>This line of text will render as underlined</u>小号文本
<small>This line of text is meant to be treated as fine print.</small>着重
<strong>rendered as bold text</strong>斜体
<em>rendered as italicized text</em>Alternate elements 对齐
<p class="text-left">left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">JustifIEd text.</p> <p class="text-nowrap">No wrap text.</p>改变大小写
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-cAPItalize">CAPItalized text.</p>缩略语 基本缩略语
<abbr Title="attribute">attr</abbr>首字母缩略语
<abbr Title="HyperText MarkuP Language" class="initialism">HTML</abbr>地址 Twitter,Inc.
795 Folsom Ave,Suite 600
San Francisco,CA 94107
P:(123) 456-7890Full name
[email protected]
<address> <strong>Twitter,Inc.</strong><br> 795 Folsom Ave,Suite 600<br> San Francisco,CA 94107<br> <abbr Title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full name</strong><br> <a href="mailto:#">[email protected]</a> </address>引用 默认样式的引用
<blockquote> <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>多种引用样式 命名来源
Someone famous inSource Title
<blockquote> <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite Title="Source Title">Source Title</cite></footer> </blockquote>另一种展示风格
Someone famous inSource Title
<blockquote class="blockquote-reverse"> ... </blockquote>列表 无序列表 Lorem ipsum dolor sit amet Consectetur adipiscing elit Integer molestIE lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Phasellus iaculis neque Purus soDales ultricIEs Vestibulum laoreet porttitor sem Ac tristique libero volutpat at Faucibus porta lacus fringilla vel Aenean sit amet erat nunc Eget porttitor lorem
<ul> <li>...</li> </ul>有序列表 Lorem ipsum dolor sit amet Consectetur adipiscing elit Integer molestIE lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Faucibus porta lacus fringilla vel Aenean sit amet erat nunc Eget porttitor lorem
<ol> <li>...</li> </ol>无样式列表 Lorem ipsum dolor sit amet Consectetur adipiscing elit Integer molestIE lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Phasellus iaculis neque Purus soDales ultricIEs Vestibulum laoreet porttitor sem Ac tristique libero volutpat at Faucibus porta lacus fringilla vel Aenean sit amet erat nunc Eget porttitor lorem
<ul class="List-unstyled"> <li>...</li> </ul>内联列表 Lorem ipsum Phasellus iaculis Nulla volutpat
<ul class="List-inline"> <li>...</li> </ul>描述 Description ListsA description List is perfect for defining terms.EuismodVestibulum ID ligula porta felis euismod semper eget lacinia odio sem nec elit.Donec ID elit non mi porta gravida at eget metus.Malesuada portaEtiam porta sem malesuada magna mollis euismod.
<dl> <dt>...</dt> <dd>...</dd> </dl>水平排列的描述 Description ListsA description List is perfect for defining terms.EuismodVestibulum ID ligula porta felis euismod semper eget lacinia odio sem nec elit.Donec ID elit non mi porta gravida at eget metus.Malesuada portaEtiam porta sem malesuada magna mollis euismod.Felis euismod semper eget laciniaFusce dAPIbus,tellus ac cursus commodo,tortor mauris condimentum nibh,ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>自动截断 代码 内联代码 For example,<section>should be wrapped as inline.
For example,<code><section></code> should be wrapped as inline.用户输入 To switch directorIEs,typecdfollowed by the name of the directory.
To edit settings,pressctrl+,
To switch directorIEs,type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings,press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>代码块
<p>Sample text here...</p>
<pre><p>Sample text here...</p></pre>变量
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>程序输出
<samp>This text is meant to be treated as sample output from a computer program.</samp>表格 基本实例 Optional table caption.
| # | First name | Last name | Username |
|---|---|---|---|
| 1 | Mark | otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table"> ... </table>条纹状表格 跨浏览器兼容性
| # | First name | Last name | Username |
|---|---|---|---|
| 1 | Mark | otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-striped"> ... </table>带边框的表格
| # | First name | Last name | Username |
|---|---|---|---|
| 1 | Mark | otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-bordered"> ... </table>鼠标悬停
| # | First name | Last name | Username |
|---|---|---|---|
| 1 | Mark | otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-hover"> ... </table>紧缩表格
| # | First name | Last name | Username |
|---|---|---|---|
| 1 | Mark | otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-condensed"> ... </table>状态类
| Class | 描述 |
|---|---|
| .active | 鼠标悬停在行或单元格上时所设置的颜色 |
| .success | 标识成功或积极的动作 |
| .info | 标识普通的提示信息或动作 |
| .warning | 标识警告或需要用户注意 |
| .danger | 标识危险或潜在的带来负面影响的动作 |
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| 8 | Column content | Column content | Column content |
| 9 | Column content | Column content | Column content |
<!-- On rows --> <tr class="active">...</tr> <tr class="success">...</tr> <tr class="warning">...</tr> <tr class="danger">...</tr> <tr class="info">...</tr> <!-- On cells (`td` or `th`) --> <tr> <td class="active">...</td> <td class="success">...</td> <td class="warning">...</td> <td class="danger">...</td> <td class="info">...</td> </tr>向使用辅助技术的用户传达用意 响应式表格 垂直方向的内容截断 firefox 和fIEldset元素
@-moz-document url-prefix() { fIEldset { display: table-cell; } }
| # | table heading | table heading | table heading | table heading | table heading | table heading |
|---|---|---|---|---|---|---|
| 1 | table cell | table cell | table cell | table cell | table cell | table cell |
| 2 | table cell | table cell | table cell | table cell | table cell | table cell |
| 3 | table cell | table cell | table cell | table cell | table cell | table cell |
| # | table heading | table heading | table heading | table heading | table heading | table heading |
|---|---|---|---|---|---|---|
| 1 | table cell | table cell | table cell | table cell | table cell | table cell |
| 2 | table cell | table cell | table cell | table cell | table cell | table cell |
| 3 | table cell | table cell | table cell | table cell | table cell | table cell |
<div class="table-responsive"> <table class="table"> ... </table> </div>表单 基本实例 Email address Password file input Check me out submit
<form> <div class="form-group"> <label for="exampleinputEmail1">Email address</label> <input type="email" class="form-control" ID="exampleinputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleinputPassword1">Password</label> <input type="password" class="form-control" ID="exampleinputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleinputfile">file input</label> <input type="file" ID="exampleinputfile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkBox"> <label> <input type="checkBox"> Check me out </label> </div> <button type="submit" class="btn btn-default">submit</button> </form>不要将表单组合输入框组混合使用 内联表单 可能需要手动设置宽度 一定要添加label标签 name Email Send invitation
<form class="form-inline"> <div class="form-group"> <label for="exampleinputname2">name</label> <input type="text" class="form-control" ID="exampleinputname2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleinputEmail2">Email</label> <input type="email" class="form-control" ID="exampleinputEmail2" placeholder="[email protected]"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form>Email address Password Remember me Sign in
<form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleinputEmail3">Email address</label> <input type="email" class="form-control" ID="exampleinputEmail3" placeholder="Email"> </div> <div class="form-group"> <label class="sr-only" for="exampleinputPassword3">Password</label> <input type="password" class="form-control" ID="exampleinputPassword3" placeholder="Password"> </div> <div class="checkBox"> <label> <input type="checkBox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button> </form>Amount (in dollars) $ .00 Transfer cash
<form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleinputAmount">Amount (in dollars)</label> <div class="input-group"> <div class="input-group-addon">$</div> <input type="text" class="form-control" ID="exampleinputAmount" placeholder="Amount"> <div class="input-group-addon">.00</div> </div> </div> <button type="submit" class="btn btn-primary">Transfer cash</button> </form>水平排列的表单 Email Password Remember me Sign in
<form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" ID="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" ID="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkBox"> <label> <input type="checkBox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form>被支持的控件 输入框 必须添加类型声明
<input type="text" class="form-control" placeholder="Text input">输入控件组 文本域
<textarea class="form-control" rows="3"></textarea>多选和单选框 默认外观（堆叠在一起） Option one is this and that—be sure to include why it's great Option two is Disabled
Option one is this and that—be sure to include why it's great Option two can be something else and selecting it will deselect option one Option three is Disabled
<div class="checkBox"> <label> <input type="checkBox" value=""> Option one is this and that—be sure to include why it's great </label> </div> <div class="checkBox Disabled"> <label> <input type="checkBox" value="" Disabled> Option two is Disabled </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" ID="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" ID="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> <div class="radio Disabled"> <label> <input type="radio" name="optionsRadios" ID="optionsRadios3" value="option3" Disabled> Option three is Disabled </label> </div>内联单选和多选框 123
123
<label class="checkBox-inline"> <input type="checkBox" ID="inlineCheckBox1" value="option1"> 1 </label> <label class="checkBox-inline"> <input type="checkBox" ID="inlineCheckBox2" value="option2"> 2 </label> <label class="checkBox-inline"> <input type="checkBox" ID="inlineCheckBox3" value="option3"> 3 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" ID="inlineRadio1" value="option1"> 1 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" ID="inlineRadio2" value="option2"> 2 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" ID="inlineRadio3" value="option3"> 3 </label>不带label文本的CheckBox 和 radio
<div class="checkBox"> <label> <input type="checkBox" ID="blankCheckBox" value="option1" aria-label="..."> </label> </div> <div class="radio"> <label> <input type="radio" name="blankRadio" ID="blankRadio1" value="option1" aria-label="..."> </label> </div>下拉列表（select） 12345
<select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>12345
<select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>静态控件 Email Password
<form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">[email protected]</p> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" ID="inputPassword" placeholder="Password"> </div> </div> </form>Email Password Confirm IDentity
<form class="form-inline"> <div class="form-group"> <label class="sr-only">Email</label> <p class="form-control-static">[email protected]</p> </div> <div class="form-group"> <label for="inputPassword2" class="sr-only">Password</label> <input type="password" class="form-control" ID="inputPassword2" placeholder="Password"> </div> <button type="submit" class="btn btn-default">Confirm IDentity</button> </form>焦点状态 演示:focus状态 禁用状态
<input class="form-control" ID="Disabledinput" type="text" placeholder="Disabled input here..." Disabled>被禁用的fIEldset <a>标签的链接功能不受影响 跨浏览器兼容性 Disabled input Disabled select menuDisabled select Can't check this submit
<form> <fIEldset Disabled> <div class="form-group"> <label for="DisabledTextinput">Disabled input</label> <input type="text" ID="DisabledTextinput" class="form-control" placeholder="Disabled input"> </div> <div class="form-group"> <label for="DisabledSelect">Disabled select menu</label> <select ID="DisabledSelect" class="form-control"> <option>Disabled select</option> </select> </div> <div class="checkBox"> <label> <input type="checkBox"> Can't check this </label> </div> <button type="submit" class="btn btn-primary">submit</button> </fIEldset> </form>只读状态
<input class="form-control" type="text" placeholder="Readonly input here…" Readonly>校验状态 将验证状态传达给辅助设备和盲人用户 input with success input with warning input with error CheckBox with success CheckBox with warning CheckBox with error
<div class="form-group has-success"> <label class="control-label" for="inputSuccess1">input with success</label> <input type="text" class="form-control" ID="inputSuccess1"> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">input with warning</label> <input type="text" class="form-control" ID="inputWarning1"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError1">input with error</label> <input type="text" class="form-control" ID="inputError1"> </div> <div class="has-success"> <div class="checkBox"> <label> <input type="checkBox" ID="checkBoxSuccess" value="option1"> CheckBox with success </label> </div> </div> <div class="has-warning"> <div class="checkBox"> <label> <input type="checkBox" ID="checkBoxWarning" value="option1"> CheckBox with warning </label> </div> </div> <div class="has-error"> <div class="checkBox"> <label> <input type="checkBox" ID="checkBoxError" value="option1"> CheckBox with error </label> </div> </div>添加额外的图标 图标、label和输入控件组 向辅助技术设备传递图标的含义 input with success (success) input with warning (warning) input with error (error) input group with success @ (success)
<div class="form-group has-success has-Feedback"> <label class="control-label" for="inputSuccess2">input with success</label> <input type="text" class="form-control" ID="inputSuccess2" aria-describedby="inputSuccess2Status"> <span class="glyphicon glyphicon-ok form-control-Feedback" aria-hIDden="true"></span> <span ID="inputSuccess2Status" class="sr-only">(success)</span> </div> <div class="form-group has-warning has-Feedback"> <label class="control-label" for="inputWarning2">input with warning</label> <input type="text" class="form-control" ID="inputWarning2" aria-describedby="inputWarning2Status"> <span class="glyphicon glyphicon-warning-sign form-control-Feedback" aria-hIDden="true"></span> <span ID="inputWarning2Status" class="sr-only">(warning)</span> </div> <div class="form-group has-error has-Feedback"> <label class="control-label" for="inputError2">input with error</label> <input type="text" class="form-control" ID="inputError2" aria-describedby="inputError2Status"> <span class="glyphicon glyphicon-remove form-control-Feedback" aria-hIDden="true"></span> <span ID="inputError2Status" class="sr-only">(error)</span> </div> <div class="form-group has-success has-Feedback"> <label class="control-label" for="inputGroupSuccess1">input group with success</label> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" ID="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status"> </div> <span class="glyphicon glyphicon-ok form-control-Feedback" aria-hIDden="true"></span> <span ID="inputGroupSuccess1Status" class="sr-only">(success)</span> </div>为水平排列的表单和内联表单设置可选的图标 input with success (success) input group with success @ (success)
<form class="form-horizontal"> <div class="form-group has-success has-Feedback"> <label class="control-label col-sm-3" for="inputSuccess3">input with success</label> <div class="col-sm-9"> <input type="text" class="form-control" ID="inputSuccess3" aria-describedby="inputSuccess3Status"> <span class="glyphicon glyphicon-ok form-control-Feedback" aria-hIDden="true"></span> <span ID="inputSuccess3Status" class="sr-only">(success)</span> </div> </div> <div class="form-group has-success has-Feedback"> <label class="control-label col-sm-3" for="inputGroupSuccess2">input group with success</label> <div class="col-sm-9"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" ID="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status"> </div> <span class="glyphicon glyphicon-ok form-control-Feedback" aria-hIDden="true"></span> <span ID="inputGroupSuccess2Status" class="sr-only">(success)</span> </div> </div> </form>input with success (success)
input group with success @ (success)
<form class="form-inline"> <div class="form-group has-success has-Feedback"> <label class="control-label" for="inputSuccess4">input with success</label> <input type="text" class="form-control" ID="inputSuccess4" aria-describedby="inputSuccess4Status"> <span class="glyphicon glyphicon-ok form-control-Feedback" aria-hIDden="true"></span> <span ID="inputSuccess4Status" class="sr-only">(success)</span> </div> </form> <form class="form-inline"> <div class="form-group has-success has-Feedback"> <label class="control-label" for="inputGroupSuccess3">input group with success</label> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" ID="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status"> </div> <span class="glyphicon glyphicon-ok form-control-Feedback" aria-hIDden="true"></span> <span ID="inputGroupSuccess3Status" class="sr-only">(success)</span> </div> </form>可选的图标与设置.sr-only类的label HIDden label (success) input group with success @ (success)
<div class="form-group has-success has-Feedback"> <label class="control-label sr-only" for="inputSuccess5">HIDden label</label> <input type="text" class="form-control" ID="inputSuccess5" aria-describedby="inputSuccess5Status"> <span class="glyphicon glyphicon-ok form-control-Feedback" aria-hIDden="true"></span> <span ID="inputSuccess5Status" class="sr-only">(success)</span> </div> <div class="form-group has-success has-Feedback"> <label class="control-label sr-only" for="inputGroupSuccess4">input group with success</label> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" ID="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status"> </div> <span class="glyphicon glyphicon-ok form-control-Feedback" aria-hIDden="true"></span> <span ID="inputGroupSuccess4Status" class="sr-only">(success)</span> </div>控件尺寸 高度尺寸 .input-lgDefault select.input-sm
<input class="form-control input-lg" type="text" placeholder=".input-lg"> <input class="form-control" type="text" placeholder="Default input"> <input class="form-control input-sm" type="text" placeholder=".input-sm"> <select class="form-control input-lg">...</select> <select class="form-control">...</select> <select class="form-control input-sm">...</select>水平排列的表单组的尺寸 Large label Small label
<form class="form-horizontal"> <div class="form-group form-group-lg"> <label class="col-sm-2 control-label" for="formGroupinputLarge">Large label</label> <div class="col-sm-10"> <input class="form-control" type="text" ID="formGroupinputLarge" placeholder="Large input"> </div> </div> <div class="form-group form-group-sm"> <label class="col-sm-2 control-label" for="formGroupinputSmall">Small label</label> <div class="col-sm-10"> <input class="form-control" type="text" ID="formGroupinputSmall" placeholder="Small input"> </div> </div> </form>调整列（column）尺寸
<div class="row"> <div class="col-xs-2"> <input type="text" class="form-control" placeholder=".col-xs-2"> </div> <div class="col-xs-3"> <input type="text" class="form-control" placeholder=".col-xs-3"> </div> <div class="col-xs-4"> <input type="text" class="form-control" placeholder=".col-xs-4"> </div> </div>辅助文本 与表单控件相关联的帮助文本 input with help text A block of help text that breaks onto a new line and may extend beyond one line.
<label class="sr-only" for="inputHelpBlock">input with help text</label> <input type="text" ID="inputHelpBlock" class="form-control" aria-describedby="helpBlock"> ... <span ID="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>按钮 可作为按钮使用的标签或元素 Link button
<a class="btn btn-default" href="#" role="button">link</a> <button class="btn btn-default" type="submit">button</button> <input class="btn btn-default" type="button" value="input"> <input class="btn btn-default" type="submit" value="submit">针对组件的注意事项 链接被作为按钮使用时的注意事项 跨浏览器展现 预定义样式 （默认样式）Default（首选项）Primary（成功）Success（一般信息）Info（警告）Warning（危险）Danger（链接）link
<!-- Standard button --> <button type="button" class="btn btn-default">（默认样式）Default</button> <!-- ProvIDes extra visual weight and IDentifIEs the primary action in a set of buttons --> <button type="button" class="btn btn-primary">（首选项）Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">（成功）Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">（一般信息）Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">（警告）Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">（危险）Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">（链接）link</button>Conveying meaning to assistive technologIEs 尺寸
<p> <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button> <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button> </p> <p> <button type="button" class="btn btn-primary">（默认尺寸）Default button</button> <button type="button" class="btn btn-default">（默认尺寸）Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button> <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button> <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button> </p>（块级元素）Block level button（块级元素）Block level button
<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button> <button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>激活状态 button 元素
<button type="button" class="btn btn-primary btn-lg active">Primary button</button> <button type="button" class="btn btn-default btn-lg active">button</button>链接（<a>）元素
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg active" role="button">link</a>禁用状态 button 元素
<button type="button" class="btn btn-lg btn-primary" Disabled="Disabled">Primary button</button> <button type="button" class="btn btn-default btn-lg" Disabled="Disabled">button</button>跨浏览器兼容性 链接（<a>）元素
<a href="#" class="btn btn-primary btn-lg Disabled" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg Disabled" role="button">link</a>链接的原始功能不受影响 图片 响应式图片 SVG 图像和 IE 8-10
<img src="..." class="img-responsive" alt="Responsive image">图片形状 跨浏览器兼容性
<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">辅助类 情境文本颜色
<p class="text-muted">...</p> <p class="text-primary">...</p> <p class="text-success">...</p> <p class="text-info">...</p> <p class="text-warning">...</p> <p class="text-danger">...</p>处理差异 Conveying meaning to assistive technologIEs 情境背景色
<p class="bg-primary">...</p> <p class="bg-success">...</p> <p class="bg-info">...</p> <p class="bg-warning">...</p> <p class="bg-danger">...</p>处理差异 Conveying meaning to assistive technologIEs 关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hIDden="true">×</span></button>三角符号
<span class="caret"></span>快速浮动
<div class="pull-left">...</div> <div class="pull-right">...</div>
// Classes .pull-left { float: left !important; } .pull-right { float: right !important; } // Usage as mixins .element { .pull-left(); } .another-element { .pull-right(); }不能用于导航条组件中 让内容块居中
<div class="center-block">...</div>
// Class .center-block { display: block; margin-left: auto; margin-right: auto; } // Usage as a mixin .element { .center-block(); }清除浮动
<!-- Usage as a class --> <div class="clearfix">...</div>
// Mixin itself .clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } } // Usage as a mixin .element { .clearfix(); }显示或隐藏内容
<div class="show">...</div> <div class="hIDden">...</div>
// Classes .show { display: block !important; } .hIDden { display: none !important; } .invisible { visibility: hIDden; } // Usage as mixins .element { .show(); } .another-element { .hIDden(); }屏幕阅读器和键盘导航
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin .skip-navigation { .sr-only(); .sr-only-focusable(); }图片替换
<h1 class="text-hIDe">Custom heading</h1>
// Usage as a mixin .heading { .text-hIDe(); }响应式工具 可用的类
| 超小屏幕手机 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面 (≥992px) | 大屏幕桌面 (≥1200px) | |
|---|---|---|---|---|
| .visible-xs-* | 可见 | 隐藏 | 隐藏 | 隐藏 |
| .visible-sm-* | 隐藏 | 可见 | 隐藏 | 隐藏 |
| .visible-md-* | 隐藏 | 隐藏 | 可见 | 隐藏 |
| .visible-lg-* | 隐藏 | 隐藏 | 隐藏 | 可见 |
| .hIDden-xs | 隐藏 | 可见 | 可见 | 可见 |
| .hIDden-sm | 可见 | 隐藏 | 可见 | 可见 |
| .hIDden-md | 可见 | 可见 | 隐藏 | 可见 |
| .hIDden-lg | 可见 | 可见 | 可见 | 隐藏 |
| 类组 | CSSdisplay |
|---|---|
| .visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
| class | 浏览器 | 打印机 |
|---|---|---|
| .visible-print-block .visible-print-inline .visible-print-inline-block | 隐藏 | 可见 |
| .hIDden-print | 可见 | 隐藏 |
@gray-darker: lighten(#000, 13.5%); // #222 @gray-dark: lighten(#000, 20%); // #333 @gray: lighten(#000, 33.5%); // #555 @gray-light: lighten(#000, 46.7%); // #777 @gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7 @brand-success: #5cb85c; @brand-info: #5bc0de; @brand-warning: #f0ad4e; @brand-danger: #d9534f;
// Use as-is .masthead { background-color: @brand-primary; } // Reassigned variables in Less @alert-message-background: @brand-info; .alert { background-color: @alert-message-background; }Scaffolding
// Scaffolding @body-bg: #fff; @text-color: @black-50;链接
// Variables @link-color: @brand-primary; @link-hover-color: darken(@link-color, 15%); // Usage a { color: @link-color; text-decoration: none; &:hover { color: @link-hover-color; text-decoration: underline; } }排版
@Font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @Font-family-serif: Georgia, "Times New Roman", Times, serif; @Font-family-monospace: Menlo, Monaco, Consolas, "CourIEr New", monospace; @Font-family-base: @Font-family-sans-serif; @Font-size-base: 14px; @Font-size-large: ceil((@Font-size-base * 1.25)); // ~18px @Font-size-small: ceil((@Font-size-base * 0.85)); // ~12px @Font-size-h1: floor((@Font-size-base * 2.6)); // ~36px @Font-size-h2: floor((@Font-size-base * 2.15)); // ~30px @Font-size-h3: ceil((@Font-size-base * 1.7)); // ~24px @Font-size-h4: ceil((@Font-size-base * 1.25)); // ~18px @Font-size-h5: @Font-size-base; @Font-size-h6: ceil((@Font-size-base * 0.85)); // ~12px @line-height-base: 1.428571429; // 20/14 @line-height-computed: floor((@Font-size-base * @line-height-base)); // ~20px @headings-Font-family: inherit; @headings-Font-weight: 500; @headings-line-height: 1.1; @headings-color: inherit;图标
@icon-Font-path: "../Fonts/"; @icon-Font-name: "glyphicons-halflings-regular";组件
@padding-base-vertical: 6px; @padding-base-horizontal: 12px; @padding-large-vertical: 10px; @padding-large-horizontal: 16px; @padding-small-vertical: 5px; @padding-small-horizontal: 10px; @padding-xs-vertical: 1px; @padding-xs-horizontal: 5px; @line-height-large: 1.33; @line-height-small: 1.5; @border-radius-base: 4px; @border-radius-large: 6px; @border-radius-small: 3px; @component-active-color: #fff; @component-active-bg: @brand-primary; @caret-wIDth-base: 4px; @caret-wIDth-large: 5px;特定浏览器厂商的 mixin Box-sizing
.Box-sizing(@Box-model) { -webkit-Box-sizing: @Box-model; // Safari <= 5 -moz-Box-sizing: @Box-model; // firefox <= 19 Box-sizing: @Box-model; }圆角
.border-top-radius(@radius) { border-top-right-radius: @radius; border-top-left-radius: @radius; } .border-right-radius(@radius) { border-bottom-right-radius: @radius; border-top-right-radius: @radius; } .border-bottom-radius(@radius) { border-bottom-right-radius: @radius; border-bottom-left-radius: @radius; } .border-left-radius(@radius) { border-bottom-left-radius: @radius; border-top-left-radius: @radius; }Box (Drop) 隐形
.Box-shadow(@shadow: 0 1px 3px rgba(0,0,.25)) { -webkit-Box-shadow: @shadow; // iOS <4.3 & AndroID <4.1 Box-shadow: @shadow; }过渡效果
.Transition(@Transition) { -webkit-Transition: @Transition; Transition: @Transition; } .Transition-property(@Transition-property) { -webkit-Transition-property: @Transition-property; Transition-property: @Transition-property; } .Transition-delay(@Transition-delay) { -webkit-Transition-delay: @Transition-delay; Transition-delay: @Transition-delay; } .Transition-duration(@Transition-duration) { -webkit-Transition-duration: @Transition-duration; Transition-duration: @Transition-duration; } .Transition-timing-function(@timing-function) { -webkit-Transition-timing-function: @timing-function; Transition-timing-function: @timing-function; } .Transition-transform(@Transition) { -webkit-Transition: -webkit-transform @Transition; -moz-Transition: -moz-transform @Transition; -o-Transition: -o-transform @Transition; Transition: transform @Transition; }变形
.rotate(@degrees) { -webkit-transform: rotate(@degrees); -ms-transform: rotate(@degrees); // IE9 only transform: rotate(@degrees); } .scale(@ratio; @ratio-y...) { -webkit-transform: scale(@ratio, @ratio-y); -ms-transform: scale(@ratio, @ratio-y); // IE9 only transform: scale(@ratio, @ratio-y); } .translate(@x; @y) { -webkit-transform: translate(@x, @y); -ms-transform: translate(@x, @y); // IE9 only transform: translate(@x, @y); } .skew(@x; @y) { -webkit-transform: skew(@x, @y); -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ transform: skew(@x, @y); } .translate3d(@x; @y; @z) { -webkit-transform: translate3d(@x, @y, @z); transform: translate3d(@x, @z); } .rotateX(@degrees) { -webkit-transform: rotateX(@degrees); -ms-transform: rotateX(@degrees); // IE9 only transform: rotateX(@degrees); } .rotateY(@degrees) { -webkit-transform: rotateY(@degrees); -ms-transform: rotateY(@degrees); // IE9 only transform: rotateY(@degrees); } .perspective(@perspective) { -webkit-perspective: @perspective; -moz-perspective: @perspective; perspective: @perspective; } .perspective-origin(@perspective) { -webkit-perspective-origin: @perspective; -moz-perspective-origin: @perspective; perspective-origin: @perspective; } .transform-origin(@origin) { -webkit-transform-origin: @origin; -moz-transform-origin: @origin; -ms-transform-origin: @origin; // IE9 only transform-origin: @origin; }动画
.animation(@animation) { -webkit-animation: @animation; animation: @animation; } .animation-name(@name) { -webkit-animation-name: @name; animation-name: @name; } .animation-duration(@duration) { -webkit-animation-duration: @duration; animation-duration: @duration; } .animation-timing-function(@timing-function) { -webkit-animation-timing-function: @timing-function; animation-timing-function: @timing-function; } .animation-delay(@delay) { -webkit-animation-delay: @delay; animation-delay: @delay; } .animation-iteration-count(@iteration-count) { -webkit-animation-iteration-count: @iteration-count; animation-iteration-count: @iteration-count; } .animation-direction(@direction) { -webkit-animation-direction: @direction; animation-direction: @direction; }透明度
.opacity(@opacity) { opacity: @opacity; // ie8 filter @opacity-IE: (@opacity * 100); filter: ~"Alpha([email protected]{opacity-IE})"; }占位符文本
.placeholder(@color: @input-color-placeholder) { &::-moz-placeholder { color: @color; } // firefox &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ &::-webkit-input-placeholder { color: @color; } // Safari and Chrome }列
.content-columns(@wIDth; @count; @gap) { -webkit-column-wIDth: @wIDth; -moz-column-wIDth: @wIDth; column-wIDth: @wIDth; -webkit-column-count: @count; -moz-column-count: @count; column-count: @count; -webkit-column-gap: @gap; -moz-column-gap: @gap; column-gap: @gap; }渐变
#gradIEnt > .vertical(#333; #000); #gradIEnt > .horizontal(#333; #000); #gradIEnt > .radial(#333; #000);
#gradIEnt > .directional(#333; #000; 45deg);
#gradIEnt > .striped(#333; 45deg);
#gradIEnt > .vertical-three-colors(#777; #333; 25%; #000); #gradIEnt > .horizontal-three-colors(#777; #333; 25%; #000);实用工具 mixin Clearfix -- 清除浮动
// Mixin .clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } } // Usage .container { .clearfix(); }水平居中
// Mixin .center-block() { display: block; margin-left: auto; margin-right: auto; } // Usage .container { wIDth: 940px; .center-block(); }尺寸助手 mixin
// Mixins .size(@wIDth; @height) { wIDth: @wIDth; height: @height; } .square(@size) { .size(@size; @size); } // Usage .image { .size(400px; 300px); } .avatar { .square(48px); }可调整大小的文本域
.resizable(@direction: both) { // Options: horizontal,vertical,both resize: @direction; // Safari fix overflow: auto; }截断文本
// Mixin .text-overflow() { overflow: hIDden; text-overflow: ellipsis; white-space: nowrap; } // Usage .branch-name { display: inline-block; max-wIDth: 200px; .text-overflow(); }视网膜屏幕（Retina）下的图片
.img-retina(@file-1x; @file-2x; @wIDth-1x; @height-1x) { background-image: url("@{file-1x}"); @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { background-image: url("@{file-2x}"); background-size: @wIDth-1x @height-1x; } } // Usage .jumbotron { .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px); }使用 Sass 包含的内容
| 路径 | 描述 |
|---|---|
| lib/ | Ruby gem code (Sass configuration,Rails and Compass integrations) |
| tasks/ | Converter scripts (turning upstream Less to Sass) |
| test/ | Compilation tests |
| templates/ | Compass package manifest |
| vendor/assets/ | Sass,JavaScript,and Font files |
| Rakefile | Internal tasks,such as rake and convert |
以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的Bootstrap中文版，献给那些英语没过四级的全部内容，希望文章能够帮你解决Bootstrap中文版，献给那些英语没过四级的所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）