Bootstrap入门：创建首个响应式页面

172 浏览量更新于2024-08-30 收藏 85KB PDF 举报

本文将深入介绍如何使用Bootstrap框架创建你的第一个响应式网页。Bootstrap是一个流行的前端开发框架，它提供了一系列预设的样式和组件，使网页设计变得更加简单和高效。本文的核心内容围绕着以下几个知识点： 1. **HTML结构基础**: 开始时，我们看到一个基本的HTML结构，包括`<!DOCTYPE html>`声明，`<html>`标签，以及`<head>`部分。在这里，我们引入了两个关键的元数据标签：`<meta charset="utf-8">`设置字符集，确保文本正确显示；`<meta name="viewport" content="width=device-width, initial-scale=1">`，用于适应不同设备屏幕尺寸，确保页面在移动设备上的良好布局。 2. **Bootstrap CSS引用**: 在`<head>`中，通过`<link>`标签链接Bootstrap的CSS文件`bootstrap.min.css`。Bootstrap的样式表为网页提供了全局的布局、字体、颜色和组件样式。 3. **jQuery和JavaScript依赖**: 为了Bootstrap的交互功能，我们引入了jQuery库（`<script src="js/jquery-1.9.1.min.js"></script>`）和Bootstrap自身的JavaScript库（`<script src="js/bootstrap.min.js"></script>`）。这两个库是Bootstrap动态效果的基础。 4. **自定义CSS样式**: 创建了一个名为`.masthead`的类，用于定义页面顶部的样式，包括背景图片、颜色、字体大小和透明度。`.active`类用于高亮显示当前链接，`.masthead-a`定义了链接的基本样式和鼠标悬停效果。 5. **响应式导航**: 提到了`.modal-header li`的半透明度，这可能与模态框或下拉菜单中的元素有关，可能包含一个可点击的链接列表。 6. **图片布局**: 使用`.img-ls`类定义了一种网格系统，其中图片宽度占23%，有边框、间距和最小高度，这有助于实现内容的灵活布局。结合以上知识点，读者可以按照示例代码创建一个基本的Bootstrap页面，了解如何组织HTML结构、应用Bootstrap样式和利用其内置组件。通过实践，读者能够逐渐掌握Bootstrap的工作原理，为后续开发更多响应式网站奠定基础。

学做学做Bootstrap的第一个页面的第一个页面

本文实例分享了第一个Bootstrap页面的实现代码，供大家参考，具体内容如下

效果图：

实现代码：

<!DOCTYPE html>

<html>

<head>

签。-->

<style>

.masthead{

padding: 110px 0px 110px;

margin-bottom: 0px;

}

.masthead:after{

content: '';

display: block;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: url(img/bg1.png) repeat center center;

opacity: 0.4;

}

.masthead h1{

font-weight: 700;

font-size: 700%;

}

.active{font-size: 120%;font-weight: bold;}

.masthead-a{

opacity: 0.5;

color: white;

font-size: medium;

}

.masthead-a:hover{

color: white;

opacity: 1;

}

.modal-header li i{opacity: 0.5;}

.text-align{

display: inline;

}

.img-ls{

width: 23%;

border: 1px solid hsl(0, 0%, 87%);

margin-right: 2%;

padding: 4px 0px;

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38637805

粉丝: 4
资源: 952

Bootstrap入门：创建首个响应式页面

bootstrap页面同时有两个（以上）轮播图问题

bootstrap页面.rar

bootstrap学习代码前端页面

bootstrap学习

BootStrap入门学习第一篇

bootstrap-landing-page:使用Bootstrap构建的第一个登录页面

bootstrapdemo1:用bootstrap写的一个小页面

bootstrap页面设计

Bootstrap页面11

bootstrap简易登录注册页面

最新资源