没有合适的资源？快使用搜索试试~ 我知道了~

首页Bootstrap3移动优先前端框架详解

Bootstrap3移动优先前端框架详解

Bootstrap

需积分: 42 50 下载量 136 浏览量更新于2024-07-19 1 收藏 26.18MB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

试读

237页

Bootstrap菜鸟教程是一份全面介绍Bootstrap前端框架的实用指南。Bootstrap，自2014年发布以来，以其简洁、灵活的设计和响应式布局而受到开发者喜爱。本教程着重于以下几个核心知识点： 1. HTML5文档类型（Doctype）：Bootstrap基于HTML5开发，为了充分利用其新特性，如新的语义元素和CSS3兼容性，开发者需在文档头部加入<!DOCTYPE html>声明，以确保浏览器正确解析和渲染页面。 2. 网格系统：Bootstrap的核心组件之一是其网格系统，用于创建响应式的布局。通过预定义的列（col-）类，开发者可以根据屏幕尺寸调整元素的排列和大小，实现自适应设计，使网页在不同设备上都能保持良好的显示效果。 3. 移动设备优先策略：Bootstrap 3的一个重大改进是采用了移动优先的设计方法。这意味着在编写代码时，首先考虑小屏幕设备的体验，然后再扩展到桌面设备。这通过在head标签中添加viewport meta标签来实现，以确保正确的视口设置和触屏缩放。 4. viewport元标签：<meta name="viewport" content="width=device-width, initial-scale=1.0"> 这个标签对于移动端优化至关重要。width=device-width确保网页宽度与设备屏幕宽度匹配，initial-scale=1.0则保证了网页在加载时以1:1的比例展示，不会出现缩放问题。 5. 友好的移动端支持：Bootstrap 3不再需要额外的CSS来支持移动设备，其核心CSS已经具备了很好的跨平台适配性，降低了开发复杂度，使得创建响应式网站变得更加便捷。通过学习和掌握这些关键知识点，新手开发者可以快速上手Bootstrap，并为他们的网站提供现代化、易于访问的多设备用户体验。同时，理解这些原则有助于遵循最佳实践，确保代码的兼容性和性能优化。

资源详情

资源推荐

2014年10月22日 Bootstrap 按钮 | w3cschool菜鸟教程

file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/bootstrap/CSS/Bootstrap%20%E6%8C%89%E9%92%AE%20%20%…

2/8

</body>

</html>

尝试一下 ?

结果如下所示：

按钮大小

下表列出了获得各种大小按钮的 class：

Class 描述

.btn-lg 这会让按钮看起来比较大。

.btn-sm 这会让按钮看起来比较小。

.btn-xs 这会让按钮看起来特别小。

.btn-block 这会创建块级的按钮，会横跨父元素的全部宽度。

下面的实例演示了上面所有的按钮 class：

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 按钮大小</title>

</head>

<body>

<p>

大的原始按钮

</button>

2014年10月22日 Bootstrap 按钮 | w3cschool菜鸟教程

file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/bootstrap/CSS/Bootstrap%20%E6%8C%89%E9%92%AE%20%20%…

3/8

大的按钮

</button>

</p>

<p>

默认大小的原始按钮

</button>

默认大小的按钮

</button>

</p>

<p>

小的原始按钮

</button>

小的按钮

</button>

</p>

<p>

特别小的原始按钮

</button>

特别小的按钮

</button>

</p>

<p>

块级的原始按钮

</button>

块级的按钮

</button>

</p>

</body>

</html>

尝试一下 ?

结果如下所示：

2014年10月22日 Bootstrap 按钮 | w3cschool菜鸟教程

file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/bootstrap/CSS/Bootstrap%20%E6%8C%89%E9%92%AE%20%20%…

4/8

按钮状态

Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。

激活状态

按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。

下表列出了让按钮元素和锚元素呈激活状态的 class：

元素 Class

按钮元素添加 .active class 来显示它是激活的。

锚元素添加 .active class 到 <a> 按钮来显示它是激活的。

下面的实例演示了这点：

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 按钮激活状态</title>

</head>

<body>

<p>

默认按钮

</button>

激活按钮

</button>

2014年10月22日 Bootstrap 按钮 | w3cschool菜鸟教程

file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/bootstrap/CSS/Bootstrap%20%E6%8C%89%E9%92%AE%20%20%…

5/8

</p>

<p>

原始按钮

</button>

激活的原始按钮

</button>

</p>

</body>

</html>

尝试一下 ?

结果如下所示：

禁用状态

当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。

下表列出了让按钮元素和锚元素呈禁用状态的 class：

元素 Class

按钮元素添加 disabled 属性到 <button> 按钮。

锚元素添加 disabled class 到 <a> 按钮。

注意：该 class 只会改变 <a> 的外观，不会改变它的功能。在这里，您需要使用自定义的

JavaScript 来禁用链接。

下面的实例演示了这点：

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 按钮禁用状态</title>

</head>

<body>

<p>

2014年10月22日 Bootstrap 按钮 | w3cschool菜鸟教程

file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/bootstrap/CSS/Bootstrap%20%E6%8C%89%E9%92%AE%20%20%…

6/8

默认按钮

</button>

禁用按钮

</button>

</p>

<p>

原始按钮

</button>

禁用的原始按钮

</button>

</p>

<p>

链接

</a>

禁用链接

</a>

</p>

<p>

原始链接

</a>

禁用的原始链接

</a>

</p>

</body>

</html>

尝试一下 ?

结果如下所示：

剩余236页未读，继续阅读

粉丝: 2
资源: 8

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

Bootstrap3移动优先前端框架详解

w3cschool菜鸟教程离线版（ 完整 ）

java菜鸟教程

一个简单的SSM框架，适合新手学习

bootstrap菜鸟教程瀑布流

bootstrap基础教程第二版 源代码

bootstrap-table 获取所有数据_Bootstrap table教程

bootstrap下载安装教程

bootstrap参考文献

bootstrap安装教程

bootstrap教程

bootstrap使用教程

bootstrap技术教程

bootstrap-table重载_BootstrapTable的使用教程

Bootstrap怎么学？

bootstrap使用详细教程，并用bootstrap实现轮播图(carousel)

bootstrap studio教程

学Bootstrap5需要学Bootstrap3吗

新版本flask-bootstrap没有Bootstrap4

Bootstrap v3.3.5 bootstrap.css

bootstrap W3school

最新资源

w3cschool菜鸟教程离线版（完整）

bootstrap基础教程第二版源代码