信息技术专题讲座2

时间：2025-03-09

信息技术专题讲座

信息技术

专题讲座

信息技术专题讲座

Bootstrap 浏览器/设备支持

信息技术专题讲座

Bootstrap html 编码规范

用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。嵌套元素应当缩进一次(即两个空格)。对于属性的定义，确保全部使用双引号，绝不要使用单引号。不要在自闭合(self-closing)元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。不要省略可选的结束标签(closing tag)(例如，</li> 或 </body>)。

信息技术专题讲座

Bootstrap HTML编码规范<!DOCTYPE html> //html5 <html lang="zh-CN" > <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> //ie <meta charset="UTF-8"> <link rel="stylesheet" href="code-guide.css"> <script src="code-guide.js"></script> </head> <body> </body> </html>

信息技术专题讲座

Bootstrap CSS编码规范

用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。为选择器分组时，将单独的选择器单独放在一行。为了代码的易读性，在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。每条声明语句的 : 后应该插入一个空格。为了获得更准确的错误报告，每条声明都应该独占一行。所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格(例如，box-shadow)。不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号，不加空格)。对于属性值或颜色参数，省略小于 1 的小数前面的 0 (例如，.5 代替 0.5;-.5px 代替 -0.5px)。十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

信息技术专题讲座

LESS 动态样式语言 Less 是一门 CSS 预处理语言，它基于javascript, 它扩充了 CSS 语言，增加了诸如变量、混合(mixin)、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上

,为 CSS 加入程序式语言的特性。客户端使用：在项目中引入Less (从下载 less.js 文件) <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> 服务器端使用：主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS,安装成功后就可以在 node 环境中对 LESS 源文件进行编译。 LESS 可以直接在客户端使用，也可以在服务器端使用。在实际项目开发中，我们更推荐使用第三种方式，将 LESS 文件编译生成静态 CSS 文件，并在 HTML 文档中应用。在 HTML中可以@import “variables.less”或者@import “variables”;; /

信息技术专题讲座

LESS 动态样式语言The Less@color: #4D926F;#header { color: @color; }

h2 {color: @color; }

#header { color: #4D926F; }

The CSS

h2 {color: #4D926F; }

信息技术专题讲座

Bootstrap 响应式实用工具 Bootstrap 提供了一些帮助器类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。

信息技术专题讲座

Bootstrap布局fixed 固定布局 <body> <div class="container"> ... </div> </body>

fluid 流式布局 <div class="container-fluid">

</div>