响应式 Web 设计 - 框架
本章节为大家介绍响应式 Web 设计框架 Bootstrap。
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
实例
我的第一个 Bootstrap 页面
...
...
...
更多内容，请查看我们的 Bootstrap 教材。
Author: hory-ai horysk
Copyright Notice: All articles on this blog are licensed under hory-ai.com horysk.com unless otherwise stated.
Related Articles
2024-12-07
CSS!important规则
CSS !important 规则什么是 !importantCSS 中的 !important 规则用于增加样式的权重。!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。实例 #myid {background-color: blue;}.myclass {background-color: gray;}p {background-color: red !important;}尝试一下 »以上实例中，尽管 ID 选择器和类选择器具有更高的优先级，但三个段落背景颜色都显示为红色，因为 !important 规则会覆盖 background-color 属性。重要说明使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。以下实例我们在查看 CSS 源码时就不是很清楚哪种颜色最重要：实例 #myid...
2024-12-07
CSS32D转换
CSS3 2D 转换 CSS3 转换CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。它是如何工作？转换的效果是让某个元素改变形状，大小和位置。您可以使用 2D 或 3D 转换来转换您的元素。鼠标移动到以下元素上，查看 2D 和 3D 的转换效果： 2D 转换3D 转换 浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 属性 transform36.04.0 -webkit-10.09.0 -ms-16.03.5 -moz-3.2 -webkit-23.015.0 -webkit-12.110.5 -o- transform-origin(two-value syntax)36.04.0 -webkit-10.09.0 -ms-16.03.5 -moz-3.2 -webkit-23.015.0 -webkit-12.110.5 -o- Internet Explorer 10, Firefox, 和 Opera支持transform 属性.Chrome 和...
2024-12-07
CSS33D转换
CSS3 3D 转换 3D 转换CSS3 允许您使用 3D 转换来对元素进行格式化。在本章中，您将学到其中的一些 3D 转换方法： rotateX()rotateY() 点击下面的元素，来查看 2D 转换与 3D 转换之间的不同之处： 2D rotate3D rotate 浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 属性 transform36.012.0 -webkit-10.016.010.0 -moz-4.0 -webkit-23.015.0 -webkit- transform-origin(three-value...
2024-12-07
CSS3动画
CSS3 动画 CSS3 动画CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。 CSS3动画 CSS3 @keyframes 规则要创建 CSS3 动画，你需要了解 @keyframes 规则。@keyframes 规则是创建动画。 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。 浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 属性 @keyframes43.04.0 -webkit-10.016.05.0 -moz-9.04.0 -webkit-30.015.0 -webkit-12.0 -o- animation43.04.0 -webkit-10.016.05.0 -moz-9.04.0 -webkit-30.015.0 -webkit-12.0 -o- 实例 @keyframes myfirst{from {background: red;}to...
2024-12-07
CSS3多列
CSS3 多列CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例: 菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。 浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号。紧跟在数字后面的 -webkit- 或 -moz-...
2024-12-07
CSS3多媒体查询实例
CSS3 多媒体查询实例本章节我们将为大家演示一些多媒体查询实例。开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下： 实例 1 ul { list-style-type: none;}ul li a { color: green; text-decoration: none; padding: 3px; display: block;} John Doe Mary Moe Amanda Panda 尝试一下 » 注意 data-email 属性。在 HTML 中我们可以使用带 data- 前缀的属性来存储信息。 520 到 699px 宽度 - 添加邮箱图标当浏览器的宽度在 520 到 699px, 邮箱链接前添加邮件图标： 实例 2 @media screen and (max-width: 699px) and (min-width: 520px) { ul li a { padding-left: 30px; ...