信息技术专题讲座2

发布时间：2021-06-06

信息技术专题讲座

信息技术

专题讲座

信息技术专题讲座

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>

</div> </div>

信息技术专题讲座

Bootstrap布局网格布局Bootstrap提供了一种以12格为基数的网格，可以通过这些方式获得十二分之n的布局排列(横排)。

信息技术专题讲座

Bootstrap 响应式表格通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时

,您将看不到任何的差别。 The html <div class="table-responsive"> </div>

信息技术专题讲座

Bootstrap 响应式导航为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一

个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 datatoggle,用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target, 指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠(Collapse)插件。

信息技术专题讲座

Bootstrap 面包屑导航(Breadcrumbs) 面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式。以博客为例，面包屑导航

可以显示发布日期、类别或标签。它们表示当前页面在

导航层次结构内的位置。 Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css )中下面所示的 class 自动被添加： .breadcrumb > li + li:before { color: #CCCCCC; content: "/ "; padding: 0 5px; }

信息技术专题讲座

Bootstrap 缩略图使用 Bootstrap 创建缩略图的步骤如下：在图像周围添加带有 class .thumbnail 的 <a> 标签。

这会添加四个像素的内边距(padding)和一个灰色的边框。当鼠标悬停在图像上时，会动画显示出图像的轮廓。添加自定义的内容把带有 class .thumbnail 的 <a> 标签改为 <div>。

在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>,我们可以使用默认的基于 span 的命名规则来调整大小。如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。

信息技术专题讲座

Bootstrap 列表组向元素 <ul> 添加 class .list-group。向 <li> 添加 class .list-group-item。 <ul class="list-group"> <li class="list-group-item">免费域名注册</li> <li class="list-group-item">免费 Window 空间托管</li> <li class="list-group-item">图像的数量</li>

<li class="list-group-item">24*7 支持</li><li class="list-group-item">每年更新成本</li> </ul>

信息技术专题讲座

Bootstrap 多媒体对象(Media Object) 这些抽象的对象样式用于创建各种类型的组件(比如：博客评论),我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用

更少的代码来实现媒体对象与文字的混排。媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象：

.media:该 class 允许将媒体对象里的多媒体(图像、视频、音频)浮动到内容区块的左边或者右边。 .media-list:如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

信息技术专题讲座

Bootstrap 插件 Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动不要尝试同时引用这两个文件，因为 bootstrap.js 和 bootstrap.min.js 都包含

了所有的插件所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery。

jQuery jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 提示：除此之外，Jquery还提供了大量的插件。目前网络上有大量开源的

JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!

信息技术专题讲座

UI 框架——jQuery UI & jQuery Easy UIjQuery UI jquery ui 是jquery开发团队开发，是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器，jQuery UI 都是一个完美的选择。 jQuery UI 包含了许多维持状态的小部件(Widget),因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件(Widget)使用相同的模式。

jQuery EasyUI

jQuery EasyUI 是第三方开发的一个基于 jQuery 的框架，集成了各种用户界面插件。

特点

相同：它们都是基于Jquery的，这都是基于jquery插件式开发比较的灵活。都是对界面上的相关组件进行封装，如布局组件，表单组件以及相关特效的组件。当然目前jquery mobile也是类似的。

不同：1)是由不同的团队开发的 2) 调用方法也略有不同

信息技术专题讲座

Bootstrap 插件下拉菜单(Dropdown)插件使用下拉菜单(Dropdown)插件，您可以向任何组件(比如导航栏、标签页、胶囊式导航菜单、按钮等)添加下拉菜单。如果您想要单独引用该插件的功能，那么您需要引用 dropdown.js。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。通过 data 属性：向链接或按钮添加 data-toggle=“dropdown” 来切换下拉菜单，如下所示：

<div class="dropdown"> <a data-toggle="dropdown" href="#">下拉菜单(Dropdown)触发器</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div>

信息技术专题讲座

Bootstrap 插件轮播(Carousel)插件 Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您

想要放置的任何类型的内容。如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

信息技术专题讲座

Bootstrap 插件/p/unslider/

Unslider — 一个超小的 jQuery 轮播(slider) 插

/p/grumblejs/

件。支持主流浏览器、键盘导航、自动调整高度和响应式布局。/p/responsive-nav.js/

一个气泡形状的提示( Tooltip)控件，可以在其围绕的元素周围做360度任意定位。

响应式导航 (Responsiv e Nav)插件

Unslider jQuery轮播插件

jQuery.Pin