标签：ted tran 元素 创建 local 下拉列表 并且 nowrap pre
bootstrap全局css样式：一共12个内容模块 概览 栅格系统 排版 代码 表格 表单 按钮 图片 辅助类 响应式工具 使用Less 使用Sass 一、概览类 1.html5文档类型 <!DOCTYPE html> 2.移动设备优先 <meta name="viewport" content="width=device-width, initial-scale=1"> 3.排版与链接 bootstrap排版、链接样式设置了基本的全局样式。分别是： * 为body元素设置background-color: #fff; * 使用@font-family-base, @font-size-base和@line-height-base变量作为排版的基本参数 * 为所有链接设置了基本颜色@link-color，并且当链接处于:hover状态时才添加下划线 这些样式都能在scaffolding.less文件中找到对应的源码 4.Normalize.css 为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。 5.布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器 .container 类用于固定宽度并支持响应式布局的容器 <div class="container"></div> .container-fluid 类用于100%宽度，占据全部视口(viewport)的容器 <div class="container-fluid"></div> 二、栅格系统 1.简介 行：row 列：column 2.媒体查询 在栅格系统中，我们在Less文件中使用以下媒体查询来创建关键的分界点阈值 /* 超小屏幕（手机，小于 768px） */ /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */ /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... } 我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。 @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) { ... } 3.栅格参数 xs超小屏幕 手机 0< xs <768px sm小屏幕 平板 768<= sm <992 md中等屏幕 桌面显示器 992<= md <1200 lg大屏幕 大桌面显示器 1200<= lg <10000 一行都是分为12列 .col-xs- .col-sm- .col-md- .col-lg- 4.实例：从堆叠到水平排列（如在div内布局） <div class="row"> <div class="col-md-8"></div> <div class="col-md-4"></div> </div> 5.实例：流式布局容器（需要container容器来包裹） <div class="container"> <div class="row"> <div class="col-md-8"></div> <div class="col-md-4"></div> </div> </div> 6.移动设备和桌面屏幕（对列添加两个类就行了，因为它是自动响应） <div class="row"> <div class="col-xs-12 col-md-8"></div> <div class="col-xs-6 col-md-4"></div> </div> 7.实例：手机、平板、桌面（对每一种设备添加一个类就行了） <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8"></div> <div class="col-xs-6 col-md-4"></div> </div> 8.实例：多余的列（column）将另起一行排列（因为一行最多有12列） 如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。 <div class="row"> <div class="col-xs-9"></div> <div class="col-xs-4"></div> <div class="col-xs-6"></div> </div> 9.响应式类重置（这种情况很少用） 即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。 <div class="row"> <div class="col-xs-6 col-sm-3"></div> <div class="col-xs-6 col-sm-3"></div> <div class="clearfix visible-xs-block"></div> </div> 10.列偏移 使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。 <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> 11.嵌套列 <div class="row"> <div class="col-sm-9"> <div class="row"> <div class="col-xs-8 col-sm-6"></div> <div class="col-xs-4 col-sm-6"></div> </div> </div> </div> 12.列排序（很少用） <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> 13.Less mixin和变量（自定义变量，现在还不太懂，以后再学） 除了用于快速布局的预定义栅格类，Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。 三、排版 1.标题 h1~h6 <h1>h1 heading <small>副标题</small></h1> //用small来标注副标题 2.页面主体 bootstrap将全局font-size设置为14px，line-height设置为1.428 <p class="lead"></p> //.class中心内容 3.内联文本元素 <mark></mark> 标记文本 <del></del> 删除文本 <s></s> 无用文本 <ins></ins> 插入文本 <u></u> 带下划线文本 <small></small> 小号文本 <strong></strong> 着重文本 <em></em> 斜体文本 <b></b> 高亮单词或短语 <i></i> 主要用于发言、技术词汇 4. 对齐 text-left <p class="text-left"></p> text-center text-right text-justify text-nowrap 5.改变大小写 text-lowercase <p class="text-lowercase"></p> text-uppercase text-capitalize 6.略缩语 <abbr title="attribute">attr</abbr> 基本略缩语 <abbr title="HyperText Markup Language" class="initialism">HTML</abbr> 首字母略缩语 7.地址 <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address> 8.引用 <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> 9.列表（重点） ul>li 无序列表 ol>li 有序列表 <ul class="list-unstyled"></ul> 无样式列表 <ul class="list-inline"></ul> 内联列表 10.描述 <dl class="dl-horizontal"> 水平排列描述 <dt></dt> <dt></dt> </dl> 四、代码 <code><section></code> 内联代码 <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> 用户输入 <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> 程序输出 五、表格 1.<table class="table table-striped"></table> 表格标签 .table 表格类 .table-striped 条纹状表格 .table-bordered 带边框表格 .table-hover 鼠标悬停 .table-condensed 紧缩表格 2.状态类（通过这些状态类为行或单元格设置颜色） .active <tr class="active"></tr> <td class="active"></td> .success .info .warning .danger 3.响应式表格 <div class="table responsive"> <table class="table"></table> </div> 六、表单 <form></form> <form class="form-inline"></form> <form class="form-horizontal"><form> 1.基本实例（表单内的每一块内容都用div来包裹） <form> //默认为块级元素，添加form-inline就可以改为内联元素 <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> </form> 2.内联表单 <form> //默认为块级元素，添加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> 3.水平排列的表单 <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> </form> 4.被支持的控件 .form-control (1)输入框 包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。 <input type="text" class="form-control" placeholder="text input"> (2)文本域 <textarea class="form-control" row=3></textarea> (3)多选和单选框 <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> 多选框 <label class="checkbox-inline"> //radio-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> (4)下拉列表 <select class="form-control"> //<select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> (5)静态控件 如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。 <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@example.com</p> </div> </div> </form> (6)状态 焦点状态 默认 禁用状态 <input class="form-control" id="disabledInput" type="text" disabled> 被禁用的 fieldset <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> <fieldset> </form> 只读状态 <input class="form-control" type="text" placeholder="Readonly input here…" readonly> help text <span id="helpBlock" class="help-block">A block</span> 校验状态（重点） 添加额外图标 (7)控件尺寸 高度尺寸： .input-lg <input class="form-control input-lg" type="text"> 默认尺寸 .input-sm 水平排列的表单组的尺寸: <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> </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> 七、按钮类 1.按钮： button: btn 2.按钮样式： btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link 3.按钮尺寸： btn-lg btn-sm bt-xs 没写尺寸的类就是默认尺寸 4.转为块级元素： btn-block 5.激活状态 active <button type="button" class="btn btn-primary btn-lg active">Primary button</button> 6.禁用状态 disabled <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> 不知道这样可以吗？<button type="button" class="btn btn-lg btn-primary disabled">Primary button</button> 6.链接<a>元素转为按钮角色 <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> 八、图片 <img src="..." alt="..." class="img-rounded"> 方形 <img src="..." alt="..." class="img-circle"> 圆形 <img src="..." alt="..." class="img-thumbnail"> 略缩图形 九、辅助类 1.情境文本颜色 .text-muted <p class="text-muted">...</p> .text-primary .text-success .text-info .text-warning .text-danger 2.情境背景色 .bg-primary <p class="bg-primary">...</p> .bg-success .bg-info .bg-warning .bg-danger 3.关闭按钮 <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button> 4.三角符号 <span class="caret"></span> 5.快速浮动 <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(); } 6.让内容块居中 <div class="center-block">...</div> // Class .center-block { display: block; margin-left: auto; margin-right: auto; } // Usage as a mixin .element { .center-block(); } 7.清除浮动 <div class="clearfix">...</div> // Mixin itself .clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } } // Usage as a mixin .element { .clearfix(); } 8.显示或隐藏内容 <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(); } 9.屏幕阅读器和键盘导航 <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(); } 10.图片替换 <h1 class="text-hide">Custom heading</h1> // Usage as a mixin .heading { .text-hide(); }
标签：ted tran 元素 创建 local 下拉列表 并且 nowrap pre
原文地址：http://www.cnblogs.com/htmlphp/p/6915025.html
