这意味着为了理解如何操作引导代码而学习Sass是非常有帮助的,金沙js娱乐场官方网站:所以需要使用 HTML5

(文/开源中国)    ,当使用CSS时,这意味着为了理解如何操作引导代码而学习Sass是非常有帮助的,我们对框架中的某些关键部分增加了对移动设备友好的样式,这次不是简单的增加一些可选的针对移动设备的样式,而class可以多次使用,正确,Bootstrap 使用了一些 HTML5 元素和 CSS 属性,Bootstrap 使用 Normalize 来建立跨浏览器的一致性

金沙js娱乐场官方网站 8
  • 新的响应式 .row-cols 类,用于快速指定跨断点的列数
  • 新的 escape-svg() 函数,可简化用于表单等的嵌入式背景图像 SVG
  • 新的 add() 和 subtract() 函数,可避免 CSS 的内置 calc
    功能出现错误和零值
  • 新的 make-col-auto() mixin 使 .col-auto 类可用于自定义 HTML
  • 通过将选择器移至 [disabled],解决了 Microsoft Edge 无法拾取
    :disabled  样式的问题
  • bg-variant()、nav-divider() 和 form-control-focus() mixins 现在在 v5
    中已弃用
  • 更新了模式页脚元素(例如按钮)的间距和对齐方式,以在空间受限时自动换行
  • 表单控件验证样式更加灵活。还将 :invalid validation
    图标更新为警报,而不是 ×,以避免与清除表单字段值的浏览器功能混淆
  • 修复了数十个 CSS 和 JS 错误
  • 更新了文档以修复链接和拼写错误,改进了辅助导航的地标,并为报告潜在漏洞的指南提供了新的安全性文档

总结

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

 

超小屏幕 手机 (<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)

列排序

11、form表单中input元素的readonly与disabled属性:

disabled指当 input
元素加载时禁用此元素。input内容不会随着表单提交

readonly规定输入字段为只读。input内容会随着表单提交。

无论设置readonly还是disabled,通过js脚本都能更改input的value

Bootstarp中CSS的使用方法,bootstarpcss

Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5
文档类型。

<!DOCTYPE html>
<html lang="zh-CN">
 ...
</html>

为了让 Bootstrap
开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head
之中添加 viewport meta 标签,如下所示:

<meta name="viewport" content="width=device-width, //视口宽度为设备宽度
          initial-scale=1.0, //缩放程度
          maximum-scale=1.0, //最大缩放级别(可选)
          user-scalable=no">//禁止页面缩放(可选)

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。Normalize.css
是一个很小的 CSS 文件,在 HTML
元素的默认样式中提供了更好的跨浏览器一致性。

关于布局

Bootstrap
提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

img-responsive 用于img元素

container 用于包裹页面上的内容的元素

  • 行需要放在container,并用来创建列的水平组。
  • 预定义的网格类,比如 .row 和
    .col-xs-4,可用于快速创建网格布局。

金沙js娱乐场官方网站 1

  • 行列可相互嵌套,嵌套后的自适应以父级元素为准,而不是设备宽度
  • 要创建三个相等的列,则使用三个
    col-xs-4,要是12个列就12个col-xs-1。

<div class="container">
 <div class="row">
  <div class="col-xs-6 col-md-2 col-md-offset-1"></div>
  <div class="col-xs-6 col-md-3"></div>
  <div class="col-xs-6 col-md-3"></div>
  <div class="col-xs-6 col-md-3"></div>
 </div>
 <div class="row">...</div>
</div>
<div class="container">.... 
<!--以上代码在手机上就是两行两列,在电脑上是一行四列,其中第一列前面有空白,比其它列宽度小三分之一-->
//可使用.col-md-push-* 和 .col-md-pull-* 这种类设定显示,col-md-push-6按照我个人的理解,是在左面浮动了6列,然后再插入元素,col-md-pull-3则是在右边浮动了3列,然后从右往左插入元素
  • 媒体查询是非常别致的”有条件的 CSS
    规则”。它只适用于一些基于某些规定条件的
    CSS。如果满足那些条件,则应用相应的样式。

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { …
}
//对于所有带有 min-width: @screen-sm-min 的设备,如果屏幕的宽度小于
@screen-sm-max,则会进行一些处理。

关于排版

  • 关于文本

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内,并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>灰
<p class="text-primary">本行内容带有一个 primary class</p>蓝
<p class="text-success">本行内容带有一个 success class</p>绿
<p class="text-info">本行内容带有一个 info class</p>深蓝
<p class="text-warning">本行内容带有一个 warning class</p>黄
<p class="text-danger">本行内容带有一个 danger class</p>红

Bootstrap 定义 <abbr>
元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为
<abbr> title 属性添加了文本)。为了得到一个更小字体的文本,请添加
.initialism 到 <abbr>。

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
  • 使用 <address>
    标签,您可以在网页上显示联系信息。
  • 使用<Blockqoute>标签作为引用

<blockquote>这是一个带有源标题的引用。<small>Someone famous in Source Title</small></blockquote>
  • list-unstyled用于未定义样式列表ul,list-inline用于水平列表ul
  • pre-scrollable使pre可滚动
  • <code>内联显示代码,<pre>显示多行代码

关于表格

金沙js娱乐场官方网站 2

金沙js娱乐场官方网站 3

通过把任意的 .table 包在 .table-responsive class
内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px
宽的大型设备上查看时,您将看不到任何的差别。

<div class="table-responsive">
 <table class="table">
  <caption>响应式表格布局</caption>
  <thead>
   <tr>
   <th>产品</th>
   <th>付款日期</th>
   <th>状态</th>
   </tr>
  </thead>
  <tbody>
   <tr>
   <td>产品1</td>
   <td>23/11/2013</td>
   <td>待发货</td>
   </tr>
  </tbody>
 </table>
</div>  

关于表单

  • 在form上加上属性role=”form”就会应用Bootstrap基本的表单结构,此时默认为垂直表单
  • 把标签和控件放在一个带有 class
    .form-group 的 <div> 中。这是获取最佳间距所必需的。
  • 向所有的文本元素
    <input>、<textarea> 和 <select> 添加 class
    .form-control。

<input type="text" class="form-control" placeholder="文本输入"/>
<textarea class="form-control" rows="3"></textarea>
<label for="name">可多选的选择列表</label>
  <select multiple class="form-control">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
  </select>
  • 在form加上类calss=form-inline,那么表单元素就会变成内联的
  • 在form加上类class=form-horizontal,那么表单元素就会变成水平的

1)设置表单控件padding和margin值
2)改变“form-group”的表现形式,类似于网格系统的“row”。
3)向标签添加 class .control-label。

  • 复选框和单选框

1)对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline
class,控制它们显示在同一行上。

  • 当您需要在一个水平表单内的表单标签后放置纯文本时,请在
    <p> 上使用 class .form-control-static。
  • 禁用的输入框
    input,如果您想要禁用一个输入框 input,只需要简单地添加 disabled
    属性
  • 对 <fieldset> 添加 disabled
    属性来禁用 <fieldset> 内的所有控件。
  • Bootstrap
    包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的
    class(.has-warning、 .has-error 或
    .has-success)即可使用验证状态。
  • .input-lg
    和.input-sm可以改变输入框的高度样式
  • help-block   Bootstrap
    表单控件可以在输入框 input
    上有一个块级帮助文本。为了添加一个占用整个宽度的内容块,请在
    <input> 后使用 .help-block。

<input class="form-control" type="text" placeholder="">
 一个较长的帮助文本块,超过一行,
 需要扩展到下一行。本实例中的帮助文本总共有两行。

关于按钮

 <button type="button" class="btn btn-default">默认按钮</button>

<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>

<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>

<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>

<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>

<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>

<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

按钮的大小

<p>
 <button type="button" class="btn btn-primary btn-lg">
  大的原始按钮
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary">
  默认大小的原始按钮
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">
  小的原始按钮
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">
  特别小的原始按钮
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg btn-block">
  块级的原始按钮
 </button>
</p>
  • class为active表示激活按钮
  • class为disabled表示禁用按钮

在a和input上使用按钮class也能弄成按钮的样子,但是考虑到跨浏览器的问题还是在button上比较好。

关于图片

关于图片的样式除了之前提到的img-responsive用于图片的自适应之外还有以下三个样式:

  • .img-rounded 圆角图片
  • .img-circle 圆形图片
  • .img-thumbnail 缩略图功能

 关于其它样式类

  • .pull-left左浮动
  • .pull-right右浮动
  • center-block内容居中
  • .clearfix清除浮动
  • .caret显示下拉式
  • .close关闭图标

关于不同设备

金沙js娱乐场官方网站 4

金沙js娱乐场官方网站 5

以上就是Bootstarp中CSS的使用方法,希望大家会喜欢。

前端框架 Bootstrap 4.4.0 发布了,以下是更新内容:

在上面的代码示例中,我们注意到 Sass 和 SCSS 编写样式的不同。
请注意,它们都使用$来声明变量。

可能需要手动设置宽度

在 Bootstrap
中,输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单,我们将这些元素的宽度设置为 width: auto;,因此,多个控件可以排列在同一行。根据你的布局需求,可能需要一些额外的定制化组件。

2、在 HTML 文档中,引用外部样式表的正确位置是?

<head>部分

您可能感兴趣的文章:

  • 全面解析Bootstrap图片轮播效果
  • 完美实现bootstrap分页查询
  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
  • 轻松使用jQuery双向select控件Bootstrap Dual Listbox
  • 值得分享的Bootstrap Ace模板实现菜单和Tab页效果
  • bootstrap实现弹窗和拖动效果
  • 详解Bootstrap四种图片样式
  • 详解Bootstrap的aria-label和aria-labelledby应用
  • bootstrap-treeview自定义双击事件实现方法
  • Yii2框架引用bootstrap中日期插件yii2-date-picker的方法

Bootstrap
使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型。 !DOCTYPE
htmlhtml lang=”zh-CN” …/htm…

(文/开源中国)    

变量

地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
first.last@example.com

复制

<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:#">first.last@example.com</a></address>

14、css属性overflow属性

参数是scroll时候,必会出现滚动条。

参数是auto时候,子元素内容大于父元素时出现滚动条。

参数是visible时候,溢出的内容出现在父元素之外。

参数是hidden时候,溢出隐藏。

15、下面哪个属性不会让 div 脱离文档流(normal flow)?答案c

position: absolute;

position: fixed;

position: relative;

float: left;

css的定位机制有三种,分别是1:文档流,2:浮动(float),3定位(position)

文档流的意义就是按照HTML里面的写法就是从上到下,从左到右的排版布局;

A:position: absolute;

生成绝对定位的元素,相对于 static
定位以外的第一个父元素进行定位;都绝对定位了,肯定脱离了文档流。。

B:position: fixed;

生成绝对定位的元素,相对于浏览器窗口进行定位;相对于浏览器了,也和正常顺序排下来没什么关系。。

C:position: relative;

生成相对定位的元素,相对于其正常位置进行定位。生成相对定位,也就是说还在原本的上下左右之间,上下左右的元素都不变,so这个没有能脱离文档流。。就这个了

D:float: left;都浮动出去了,还上哪保持原位置去

更新说明:

创建mixin非常简单,只需在样式块之前添加@mixin和mixin名称,如下所示

向辅助技术设备传递图标的含义

为了确保辅助技术- 如屏幕阅读器 –
正确传达一个图标的含义,额外的隐藏的文本应包含在 .sr-only 类中,并明确关联使用了 aria-describedby 的表单控件。或者,以某些其他形式(例如,文本输入字段有一个特定的警告信息)传达含义,例如改变与表单控件实际相关联的 <label> 的文本。

虽然下面的例子已经提到各自表单控件本身的 <label> 文本的验证状态,上述技术(使用 .sr-only 文本
aria-describedby) )已经包括了需要说明的目的。

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">(success)</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">(warning)</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">(error)</div><div class="form-group has-success has-feedback"><label class="control-label" for="inputGroupSuccess1">Input group with success</label><div class="input-group">@<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status"></div>(success)</div>

5、下列哪个不属于id与class之间的区别:

正确:id在文档中只能使用一次,而class可以多次使用

正确:id比class具有更高的样式优先级

正确:一个元素只能有一个id属性值,却可以拥有多个class属性值

错误:在class中可以定义:hover伪类,在id中不能定义

解释:在样式表定义一个样式的时候,可以定义id也可以定义class。

 1、在CSS文件里书写时,ID加前缀”#”;CLASS用”.” 

2、id一个页面只可以使用一次;class可以多次引用。 

3、ID是一个标签,用于区分不同的结构和内容,就象名字,如果一个屋子有2个人同名,就会出现混淆;class是一个样式,可以套在任何结构和内容上,就象一件衣服; 

4、从概念上说就是不一样的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。

SCSS
的另一个了不起的特性是它能够将可重用的样式打包在一起,并允许根据需要将样式导入到另一个样式块中,从而减少代码中的冗余。

有序列表

顺序至关重要的一组元素。

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

复制

<ol><li>...</li></ol>

17、display: none 和 visibility:hidden

display: none;不为被隐藏的对象保留其物理空间;

visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明;

repaint(重绘)
,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background
color,不会影响到dom结构渲染。

reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。

总结:

display:none改变了dom的结构,所以产生了reflow
visibility:hidden没有改变dom结构,触发repaint

由于历史原因,连字符和下划线被认为是相同的,也就是说@mixin mixin-name {
}和@mixin mixin_name { }是一样的。

Conveying meaning to assistive technologies

为按钮添加不同的颜色只是一种视觉上的信息表达方式,但是,对于使用辅助技术
— 例如屏幕阅读器 —
的用户来说,颜色是不可见的。建议,确保通过颜色表达的信息或者通过内容自身表达出来(按钮上的文字),或者通过其他方式
— 例如通过 .sr-only 类隐藏的额外文本 — 表达出来。

4、如何产生带有正方形项目的列表?

正确答案:list-style-type: square

.firstClass { color: blue; } .secondClass { color: red; }

代码

8、innerHTML、innerText、outerHTML

例子:<div id=”test”><span
style=”color:red”>test1</span>test2</div>

test.innerHTML:

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

上例中的test.innerHTML的值也就是“<span
style=”color:red”>test1</span> test2 ”。

test.innerText:

从起始位置到终止位置的内容, 但它去除Html标签

上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

除了包含innerHTML的全部内容外, 还包含对象标签本身。

上例中的text.outerHTML的值也就是<div id=”test”><span
style=”color:red”> test1 </span> test2 </div>

@if

跨浏览器展现

我们总结的最佳实践是:强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。

另外,我们还发现了 Firefox <30 版本的浏览器上出现的一个
bug,其表现是:阻止我们为基于 <input> 元素所创建的按钮设置 line-height 属性,这就导致在
Firefox 浏览器上不能完全和其他按钮保持一致的高度。

**3、 请判断以下说法是否正确:如需定义元素内容与边框间的空间,可使用 padding 属性,并可使用负值? **

错误。(margin可以,padding不行)

上述代码等同于

水平排列的描述

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。

Description lists
A description list is perfect for defining terms.

Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem
nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Felis euismod semper eget lacinia
Fusce 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>

6、在不考虑H5的情况下,下列哪些值是可以作为标签的type属性的属性值。()

a. text

b. submit

c. button

d. date

答案:abc

以下 input 类型是 HTML5
中的新类型:color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel
和 url。

我们还可以使用父选择器将角色限定在另一个类中,就像这样

透明度

为所有浏览器设置透明度,并为IE8提供 filter 备用滤镜。

  1. .opacity(@opacity) {
  2. opacity: @opacity;
  3. // IE8 filter
  4. @opacity-ie: (@opacity * 100);
  5. filter: ~"alpha(opacity=@{opacity-ie})";
  6. }

 

7、CSS中的width属性并不总是有效的,如果对象是inline对象,width属性就会被忽略。

内联元素的高度、宽度及顶部和底部边距不可设置;元素的宽度就是它包含的文字或图片的宽度,不可改变。

请注意,SCSS中的@import用于将部分内容获取到其他SCSS文件中,但它们不会成为
CSS 文件,名称前用_表示。

将验证状态传达给辅助设备和盲人用户

使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示,但是并不能将这种提示信息传达给使用辅助设备的用户

  • 例如屏幕阅读器 – 或者色盲用户。

为了确保所有用户都能获取正确信息,Bootstrap
还提供了另一种提示方式。例如,你可以在表单控件的 <label>标签上以文本的形式显示提示信息(就像下面代码中所展示的);包含一个 Glyphicon
字体图标 (还有赋予 .sr-only 类的文本信息

  • 参考Glyphicon
    字体图标实例);或者提供一个额外的 辅助信息 块。另外,对于使用辅助设备的用户,无效的表单控件还可以赋予一个 aria-invalid="true" 属性。

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>

1、CSS 指的是?

Cascading Style Sheets

如果有一种方法可以使用 SCSS 将所有这些输入解析为一个 CSS
文件,该怎么办。 CSS 中变量的概念来自 JS 方法。

渐变

便于把任何两种颜色变成背景渐变色。想要使他更高级些,可以设置一个direction(方向),使用三种颜色,也可以使用径向(radial)渐变。使用一个mixin(混入),你就可以得到所有需要的前缀语法。

  1. #gradient > .vertical(#333; #000);
  2. #gradient > .horizontal(#333; #000);
  3. #gradient > .radial(#333; #000);

 

你也可以为标准的里两颜色线性渐变指定角度:

复制

#gradient > .directional(#333; #000; 45deg);

如果你需要一个条纹风格的渐变,这也很容易。只要指定一个颜色,我们将该颜色半透明的条纹覆盖其上。

复制

#gradient > .striped(#333; 45deg);

再来试试三种颜色。利用此 mixin
,并为其设置第一种颜色、第二种颜色、第二种颜色的色标(例如
25%),还有第三种颜色:

  1. #gradient > .vertical-three-colors(#777; #333; 25%; #000);
  2. #gradient > .horizontal-three-colors(#777; #333; 25%; #000);

 

当心! 如果你想删除某个渐变,确保将你所添加的针对 IE
的 filter 一并删除。你可以通过使用 .reset-filter()mixin
和 background-image: none; 达到目的。

8、标准盒子模型和IE盒子模型

金沙js娱乐场官方网站 6

IE盒子模型和标准盒子模型都是由四个部分组成的:margin,border,padding,content这四个部分!!!

不同的是在标准盒子模型中content是一个独立的部分不包含其他部分!!但是在IE盒子模型中content包含了border,padding,是一个总体的概念!!

css 中“”是 css3 中特有的选择器,A B表示选择 A 元素的所有子B元素,与A
B不同的是,A B选择所有后代元素,为A B只选择一代。

变量

整个 Bootstrap
项目中使用了大量的变量,这些变量被用来代表颜色、空白(内部、边距)、字体等。详细内容请参考定制工具。

9、css中clear的作用?

clear : none | left | right | both.

对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。

10、

金沙js娱乐场官方网站 7

.button-green { @include button; }

引用

在你的文档中引用其他来源的内容。

13、置换元素

特殊的元素:如img|input|select|textarea|button|label等,他们被称为可置换元素。

他们区别一般inline元素(相对而言,称non-replaced
element)是:这些元素拥有内在尺寸(intrinsic
dimensions),他们可以设置width/height属性。

他们的性质同设置了display:inline-block的元素一致。

@for

媒体查询

在栅格系统中,我们在 Less 文件中使用以下媒体查询(media
query)来创建关键的分界点阈值。

  1. 复制
  2. /* 超小屏幕(手机,小于 768px) */
  3. /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */
  4. /* 小屏幕(平板,大于等于 768px) */
  5. @media(min-width:@screen-sm-min){...}
  6. /* 中等屏幕(桌面显示器,大于等于 992px) */
  7. @media(min-width:@screen-md-min){...}
  8. /* 大屏幕(大桌面显示器,大于等于 1200px) */
  9. @media(min-width:@screen-lg-min){...}

 

我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS
的影响限制在更小范围的屏幕大小之内。

  1. 复制
  2. @media(max-width:@screen-xs-max){...}
  3. @media(min-width:@screen-sm-min) and (max-width:@screen-sm-max){...}
  4. @media(min-width:@screen-md-min) and (max-width:@screen-md-max){...}
  5. @media(min-width:@screen-lg-min){...}

 

16、要运用css3动画,你需要运用@keyframes规则 animation属性

Mixins

链接(<a>)元素

为基于 <a> 元素创建的按钮添加 .disabled 类。

Primary
link Link

复制

<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>

我们把 .disabled 作为工具类使用,就像 .active 类一样,因此不需要增加前缀。

12、DHTML

DHTML实现了网页从Web服务器下载后无需再经过服务的处理,而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如,当鼠标指针移到文章段落中时,段落能够变成蓝色,或者当鼠标指针移到一个超级链接上时,会自动生成一个下拉式子链接目录等。

包括:

①动态内容(DynamicContent):动态地更新网页内容,可“动态”地插入、修改或删除网页的元件,如文字、图像、标记等。

动态排版样式(Dynamic Style
Sheets):W3C的CSS样式表提供了设定HTML标记的字体大小、字形、样式、粗细、文字颜色、行高度、加底线或加中间横线、缩排、与边缘距离、靠左右或置中、背景图片或颜色等排版功能,而“动态排版样式”即可以“动态”地改变排版样式。

从上面的 CSS 代码示例可以看出,我们能够推断 HTML
文件的结构,同时保持实现的简短。这样做的另一个好处是,它有助于避免拼写错误,而且还可以看到,我们已经确定了一些规则的作用域,因此这些样式只用于nav。

Box (Drop) 隐形

如果你的目标用户使用的是最新版本和更高级的浏览器和设备,只需单独使用 box-shadow 属性即可。如果你需要兼容较老的
Android (低于 v4) 和 iOS 设备 (低于 iOS
5),可以使用下面这个 不建议使用 的
mixin,便于帮你添加 -webkit 前缀。

由于 Bootstrap 并未官方提供对过时(不支持标准属性)平台的支持,此 mixin
从 v3.1.0 版本期就 不建议使用 了。为了保持向后兼容,Bootstrap
将继续在内部使用此 mixin, 直到 Bootstrap v4。

在设置 box
阴影时务必使用 rgba() 颜色,这样可以使他们尽可能地与背景无缝融入。

  1. .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  2. -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
  3. box-shadow: @shadow;
  4. }

 

编译结果:

可调整大小的文本域

方便设置任何文本域或其他元素的尺寸可调整。默认依循浏览器默认行为
(both),即垂直、水平都可以调整。

  1. .resizable(@direction: both) {
  2. // Options: horizontal, vertical, both
  3. resize: @direction;
  4. // Safari fix
  5. overflow: auto;
  6. }

 

 

 

 

截断文本

此 mixin
用来以省略号代替被截断的文本。元素必须是 block 或 inline-block 级。

  1. // Mixin
  2. .text-overflow() {
  3. overflow: hidden;
  4. text-overflow: ellipsis;
  5. white-space: nowrap;
  6. }
  7. // Usage
  8. .branch-name {
  9. display: inline-block;
  10. max-width: 200px;
  11. .text-overflow();
  12. }

 

即使有了CSS3,我们仍然需要依赖一些技巧来设计用户界面的样式,在编写 HTML
时,嵌套和可视化层次结构样式有助于理解,但这是常规 CSS 做不到。

预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

(默认样式)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>

编译后:

显示或隐藏内容

.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免
CSS 样式优先级问题,就像 quick
floats 一样的做法。注意,这些类只对块级元素起作用,另外,还可以作为
mixin 使用。

.hide 类仍然可用,但是它不能对屏幕阅读器起作用,并且从 v3.0.1
版本开始就不建议使用了。请使用 .hidden 或.sr-only 。

另外,.invisible 类可以被用来仅仅影响元素的可见性,也就是所,元素的 display 属性不被改变,并且这个元素仍然能够影响文档流的排布。

复制

<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();}
@mixin txt($weight) { color: white; @if $weight == bold { font-weight: bold;} } .txt1 { @include txt(none); } .txt2 { @include txt(bold); }

使用 Less 工具构建

variables.less 文件中定义的两个 Less
变量决定了排版尺寸:@font-size-base 和 @line-height-base。第一个变量定义了全局
font-size 基准,第二个变量是 line-height
基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的 margin、
padding 和 line-height。自定义这些变量即可改变 Bootstrap 的默认样式。

SCSS 中的函数是 SASS
功能的重要组成部分,它们允许我们定义可在整个样式表中重用的复杂操作。有很多内置的
Sass 函数可供我们使用,查看文档了解更多信息。

跨浏览器兼容性

虽然 Bootstrap 会将这些样式应用到所有浏览器上,Internet Explorer 11
及以下浏览器中的 <fieldset> 元素并不完全支持 disabled 属性。因此建议在这些浏览器上通过
JavaScript 代码来禁用 <fieldset>

Disabled input

Disabled select menu              Disabled 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>

SCSS 中的概念嵌套和作用域

实例:移动设备和桌面屏幕

是否不希望在小屏幕设备上所有列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的类吧,即 .col-xs-*和 .col-md-*。请看下面的实例,研究一下这些是如何工作的。

金沙js娱乐场官方网站 8

 

  1. <!--Stack the columns on mobile by making one full-width and the other half-width -->
  2. <div class="row">
  3. <div class="col-xs-12 col-md-8">.col-xs-12.col-md-8</div>
  4. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  5. </div>
  6. <!--Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  7. <div class="row">
  8. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  9. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  10. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  11. </div>
  12. <!--Columns are always 50% wide, on mobile and desktop -->
  13. <div class="row">
  14. <div class="col-xs-6">.col-xs-6</div>
  15. <div class="col-xs-6">.col-xs-6</div>
  16. </div>

 

 

@mixin button($background) { font-size: 1em; padding: 0.5em 1.0em; text-decoration: none; color: #fff; background: $background; }

高度尺寸

创建大一些或小一些的表单控件以匹配按钮尺寸。

            .input-lg                      Default 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>

父选择器()

下拉列表(select)

注意,很多原生选择菜单 – 即在 Safari 和 Chrome 中 –
的圆角是无法通过修改 border-radius 属性来改变的。

          1           2           3           4           5        

复制

<select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>

对于标记了 multiple 属性的 <select> 控件来说,默认显示多选项。

          1           2           3           4           5        

复制

<select multiple class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}

基本实例

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 —
少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

复制

<table class="table">
  ...
</table>
.button-green { font-size: 1em; padding: 0.5em 1.0em; text-decoration: none; color: #fff; background-color: green; }

无用文本

对于没用的文本使用 <s> 标签。

This line of text is meant to be treated as no longer accurate.

复制

<s>This line of text is meant to be treated as no longer accurate.</s>
.firstClass { @include test(1); }

内联代码

通过 <code> 标签包裹内联样式的代码片段。

For example, <section> should be wrapped as inline.

复制

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

2.语法书写方式不同,Sass
是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS
的语法书写和我们的 CSS 语法书写方式非常类似。

被支持的控件

表单布局实例中展示了其所支持的标准表单控件。

当使用CSS时,我们经常在一个全局环境设置,这样可能会错误地设置元素的样式。

情境文本颜色

通过颜色来展示意图,Bootstrap
提供了一组工具类。这些类可以应用于链接,并且在鼠标经过时颜色可以还可以加深,就像默认的链接一样。

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

复制

<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>
.button-green { font-size: 1em; padding: 0.5em 1.0em; text-decoration: none; color: #fff; background: green; }

针对组件的注意事项

虽然按钮类可以应用到 <a> 和 <button> 元素上,但是,导航和导航条组件只支持 <button> 元素。

.container{ .right-area{ background-color : #0000 }}

自动截断

通过 text-overflow 属性,水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内,列表将变为默认堆叠排列的布局方式。

我们还将通过演示示例来了解为什么要使用这些预处理程序,演示如何将样式划分为更小的特定组件,而不必强迫用户下载大量不需要的CSS文件。

不能用于导航条组件中

排列导航条中的组件时可以使用这些工具类:.navbar-left 或 .navbar-right 。 参见导航条文档以获取更多信息。

具有控制流的条件样式if()

水平排列的表单

通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap
预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。

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>

if()是 Sass
的一个内建函数,与之相似的@if则是一个内建指令。if()用来做条件判断并返回特定值,示例如下:

只读状态

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅(就像被禁用的输入框一样),但是仍然保留标准的鼠标状态。

复制

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
$font-stack: Helvetica, sans-serif;$primary-color: #333;body { font: 100% $font-stack; color: $primary-color;}

代码块

多行代码可以使用 <pre> 标签。为了正确的展示代码,注意将尖括号做转义处理。

<p>Sample text here...</p>

复制

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

还可以使用 .pre-scrollable 类,其作用是设置 max-height 为 350px
,并在垂直方向展示滚动条。

CSS 存在哪些问题?

默认外观(堆叠在一起)

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&mdash;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&mdash;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>

CSS 预处理器是什么?

链接(<a>)元素

可以为基于 <a> 元素创建的按钮添加 .active 类。

Primary
link Link

复制

<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>