0基础学前端 day4

大家好，欢迎来到无限大的频道。

今天继续带领大家开始0基础学前端。

一、什么是Bootstrap框架？

Bootstrap是一个开源前端框架，于2011年由Twitter的开发团队开发并发布。其主要目的是简化开发过程，并使开发者能够轻松快速地构建响应式网站和应用程序。它提供了一系列的HTML、CSS和JavaScript组件，如网格系统、按钮、导航栏、表单等，帮助开发者创建一致且美观的用户界面。Bootstrap最大的优势在于其响应式设计，能够自动适应各种设备尺寸。此外，Bootstrap的丰富文档和活跃的社区使其成为初学者和专业开发者的热门选择。

著名的应用

众多网站和应用程序使用Bootstrap来构建其前端界面。其中一些著名的例子包括：

Twitter: 作为Bootstrap的发源地，Twitter为初始开发提供了很多资源。
LinkedIn: 职业社交平台LinkedIn利用Bootstrap确保其界面的可维护性和高效性。
Vogue: 著名时尚杂志Vogue的网站也使用了Bootstrap来提高用户体验。

这些企业利用Bootstrap来快速构建和迭代其产品，同时确保跨设备的用户体验一致性。

二、Bootstrap的重要和常用内容

1. 网格系统（Grid System）

Bootstrap的网格系统是其核心之一，它使用灵活的容器（container）来进行布局，通过行（row）和列（col）的组合构成。默认情况下，它基于12列的布局，允许你通过组合不同的列宽来创建不同的页面布局。网格系统通过响应式设计，确保布局在各种设备上都能良好显示。

容器（Container）: container类用于固定宽度的布局，而container-fluid用于全宽度布局。它们是每行的父元素。
```
<div class="container">
</div>
```
行（Row）: row类用于水平排列列。每个row必须包含在container内。
```
<div class="row"><div class="col">Column</div>
</div>
```
列（Columns）: col-*类定义列的宽度。可以是动态（col）或固定比例（col-md-4）。
```
<div class="col-md-4">Medium 4/12</div>
<div class="col-md-8">Medium 8/12</div>
```

2. 排版（Typography）

Bootstrap提供了一整套一致的排版样式，包括标题、段落、文本格式化和对齐选项。默认字体使用"Helvetica Neue", Helvetica, Arial, sans-serif。

标题和副标题: 使用<h1>到<h6>标签自带Bootstrap的样式。
字体大小与颜色: 提供了一系列帮助类，如text-primary、text-secondary等，用于快速修改文本颜色。
```
<h1 class="text-primary">Primary Heading</h1>
<p class="lead">This is a lead paragraph.</p>
```

3. 组件（Components）

Bootstrap提供了丰富的UI组件，这些组件已经过精心设计、测试和调试，使得它们在各类项目中高度复用和便捷使用。

按钮（Buttons）: 多种样式可选，如btn-primary（蓝色），btn-secondary（灰色）等。
```
<button type="button" class="btn btn-primary">Primary Button</button>
```

导航栏（Navbar）: 提供响应式、可定制的导航栏。

<nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="#">Brand</a>
</nav>

模态框（Modal）: 用于创建模态提示和对话框。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Open Modal</button>

4. JavaScript插件（JavaScript Plugins）

Bootstrap包含了一些JavaScript插件，用于增强UI的交互性。这些插件大多依赖于jQuery，因此需要在页面中引入jQuery。

模态框（Modals）: 提供对话框、多媒体查看器、lightbox等功能。

轮播（Carousel）: 用于创建响应式、自动循环的图片或内容滑块。

<div id="carouselExample" class="carousel slide" data-ride="carousel"><!-- Carousel content here -->
</div>

5. 表单（Forms）

Bootstrap提供了格式统一且美观的表单样式，包括输入框、选择框、单选按钮、复选框等，所有组件均有一致的间距和风格。

表单控制（Form Control）: 使用类如form-control来美化输入元素。
```
<input type="text" class="form-control" placeholder="Enter text">
```
表单布局: 支持水平表单和内联表单布局样式，为复杂的表单设计提供了良好的基础。

通过使用Bootstrap这一前端框架，可以大幅减少开发时间，提高代码可维护性，并确保在不同设备上的一致性。Bootstrap的灵活性和易用性使其成为初学者和经验丰富的开发者都青睐的选择。

自定义样式（Customizing Styles）

开发者可以通过覆盖Bootstrap的默认样式或者直接编辑其源代码来定制自己想要的风格。此外，Bootstrap 4开始引入的SCSS支持更是提升了其定制的灵活性。

使用Bootstrap优化代码实例

个人主页优化

首先引入Bootstrap的CSS文件：

<head><!-- Add Bootstrap CSS CDN link --><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>

然后，将代码中的结构修改以适应Bootstrap的类，如使用container、row、col进行布局结构的调整。

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>我的个人主页</title>  <!-- 替换为国内可访问的Bootstrap CSS CDN -->  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet">  <link rel="stylesheet" href="styles.css">  
</head>  
<body>  <!-- Navbar -->  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">  <a class="navbar-brand" href="#">个人主页</a>  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">  <span class="navbar-toggler-icon"></span>  </button>  <div class="collapse navbar-collapse" id="navbarNav">  <ul class="navbar-nav ml-auto">  <li class="nav-item active"><a class="nav-link" href="#">首页</a></li>  <li class="nav-item"><a class="nav-link" href="#bio">关于我</a></li>  <li class="nav-item"><a class="nav-link" href="#hobbies">兴趣</a></li>  <li class="nav-item"><a class="nav-link" href="#contact">联系</a></li>  </ul>  </div>  </nav>  <!-- Header -->  <header class="header bg-dark text-white text-center py-3">  <h1>欢迎来到我的个人主页</h1>  </header>  <!-- Main Content -->  <main class="content container mt-4">  <div class="row">  <!-- Bio Section -->  <section id="bio" class="col-lg-4 col-md-6 mb-4">  <div class="card shadow-sm">  <img src="https://wxdwuxd.oss-cn-beijing.aliyuncs.com/4027b724a62b206a73ba495e732af2b.jpg" class="card-img-top" alt="Profile Image">  <div class="card-body">  <h2 class="card-title">关于我</h2>  <p class="card-text">你好！我是一个前端开发的初学者，正在学习如何创建美观且有用的网页。</p>  </div>  </div>  </section>  <!-- Hobbies Section -->  <section id="hobbies" class="col-lg-4 col-md-6 mb-4">  <div class="card shadow-sm">  <div class="card-body">  <h2 class="card-title">爱好与兴趣</h2>  <ul class="list-group list-group-flush">  <li class="list-group-item">编程</li>  <li class="list-group-item">阅读</li>  <li class="list-group-item">旅行</li>  </ul>  </div>  </div>  </section>  <!-- Projects Section -->  <section class="col-lg-4 col-md-6 mb-4">  <div class="card shadow-sm">  <div class="card-body">  <h2 class="card-title">查看我的作品</h2>  <ul class="list-group list-group-flush">  <li class="list-group-item"><a href="#">我的第一个项目</a></li>  <li class="list-group-item"><a href="#">一个有趣的项目</a></li>  </ul>  </div>  </div>  </section>  </div>  <!-- Contact Form Section -->  <section id="contact" class="py-4 bg-light rounded shadow-sm">  <h2 class="text-center">联系我</h2>  <form class="px-4">  <div class="form-row">  <div class="form-group col-md-6">  <label for="name">姓名</label>  <input type="text" class="form-control" id="name" placeholder="输入姓名">  </div>  <div class="form-group col-md-6">  <label for="email">邮箱</label>  <input type="email" class="form-control" id="email" placeholder="输入邮箱">  </div>  </div>  <div class="form-group">  <label for="message">留言</label>  <textarea class="form-control" id="message" rows="4" placeholder="输入留言"></textarea>  </div>  <button type="submit" class="btn btn-primary">发送</button>  </form>  </section>  </main>  <!-- Footer -->  <footer class="footer bg-dark text-white text-center py-2">  <p>联系我：<a class="text-white" href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p>  </footer>  </body>  
</html>

把对应的css代码也进行一个调整

body {  margin: 0;  font-family: 'Roboto', sans-serif;  
}  .header {  text-shadow: 2px 2px 4px #000000;  
}  .navbar-brand,  
.nav-link {  font-size: 1.1em;  
}  .content {  padding: 20px 0;  
}  .card {  border: none; /* 清除默认边框 */  border-radius: 10px;  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  transition: transform 0.3s;  overflow: hidden;  
}  .card:hover {  transform: scale(1.05);  
}  .card-img-top {  object-fit: cover;  height: 200px;  
}  .card-title {  font-size: 1.5em;  
}  ul {  list-style: none;  padding: 0;  
}  li {  margin-bottom: 10px;  
}  a {  color: #0066cc;  text-decoration: none;  
}  a:hover {  text-decoration: underline;  color: #004999;  
}  .form-control {  margin-bottom: 15px;  
}  .btn-primary {  background-color: #0066cc;  border-color: #0066cc;  
}  .btn-primary:hover {  background-color: #004999;  border-color: #004999;  
}  .footer {  background-color: #333;  color: white;  text-align: center;  padding: 10px;  width: 100%;  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.2);  
}

KD介绍代码优化

如上，在<head>中引入Bootstrap的CSS。在<body>中用Bootstrap类替换现有的结构，以实现响应式设计。

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>凯文·杜兰特</title>  <!-- 使用国内可访问的Bootstrap CSS CDN -->  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet">  <link rel="stylesheet" href="kd.css">  
</head>  
<body>  <!-- Navbar -->  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">  <a class="navbar-brand" href="#">杜兰特主页</a>  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">  <span class="navbar-toggler-icon"></span>  </button>  <div class="collapse navbar-collapse" id="navbarNav">  <ul class="navbar-nav ml-auto">  <li class="nav-item active"><a class="nav-link" href="#">首页</a></li>  <li class="nav-item"><a class="nav-link" href="#bio">简介</a></li>  <li class="nav-item"><a class="nav-link" href="#career">职业生涯</a></li>  <li class="nav-item"><a class="nav-link" href="#teams">球队历程</a></li>  <li class="nav-item"><a class="nav-link" href="#achievements">成就</a></li>  <li class="nav-item"><a class="nav-link" href="#personal-life">个人生活</a></li>  </ul>  </div>  </nav>  <header class="header">  <h1>凯文·杜兰特</h1>  </header>  <main class="container content mt-4">  <div class="row">  <div class="col-md-4">  <section class="image text-center mb-4">  <img src="https://wxdwuxd.oss-cn-beijing.aliyuncs.com/6fa6ec013f49061e5c313827b6099f2.png" alt="凯文·杜兰特" class="rounded-circle img-fluid">  </section>  </div>  <div class="col-md-8">  <section id="bio" class="bio mb-4">  <h2>简介</h2>  <p>凯文·杜兰特（Kevin Durant）是NBA著名篮球运动员，司职小前锋...</p>  </section>  <section id="career" class="career mb-4">  <h2>职业生涯</h2>  <p>杜兰特的职业生涯始于2007年，他在2007年NBA选秀中被西雅图超音速以第一顺位选中...</p>  </section>  </div>  </div>  <div class="row">  <div class="col-md-6">  <section id="teams" class="teams mb-4">  <h2>球队历程</h2>  <ul class="list-group">  <li class="list-group-item">西雅图超音速 (2007-2008)</li>  <li class="list-group-item">俄克拉荷马城雷霆 (2008-2016)</li>  <li class="list-group-item">金州勇士 (2016-2019)</li>  <li class="list-group-item">布鲁克林篮网 (2019-2022)</li>  <li class="list-group-item">菲尼克斯太阳 (2022-至今)</li>  </ul>  </section>  </div>  <div class="col-md-6">  <section id="achievements" class="achievements mb-4">  <h2>成就</h2>  <ul class="list-group">  <li class="list-group-item">两届NBA总冠军 (2017, 2018)</li>  <li class="list-group-item">四届NBA得分王 (2010, 2011, 2012, 2014)</li>  <li class="list-group-item">两届总决赛MVP (2017, 2018)</li>  <li class="list-group-item">NBA常规赛MVP (2014)</li>  <li class="list-group-item">2021年东京奥运会金牌</li>  <li class="list-group-item">十届NBA全明星</li>  </ul>  </section>  </div>  </div>  <section id="personal-life" class="personal-life mb-5">  <h2>个人生活</h2>  <p>杜兰特在场外也十分活跃，他积极参与慈善和社区活动，成立了「凯文·杜兰特慈善基金会」，旨在帮助年轻人和改善社区生活。此外，他还是投资者，参与了多个初创公司的投资。</p>  </section>  </main>  <footer class="footer bg-dark text-white text-center py-2">  <p>© 2024 凯文·杜兰特粉丝页面</p>  </footer>  
</body>  
</html>

body {  font-family: 'Roboto', sans-serif;  color: #f0f0f0;  margin: 0;  padding: 0;  background-color: #121212;  
}  .header {  background: linear-gradient(135deg, #1a1a1a 25%, #000000 100%);  color: #f0f0f0;  text-align: center;  padding: 20px;  text-shadow: 2px 2px 5px #000000;  
}  .content {  padding: 0 15px;  
}  .img-fluid {  max-width: 70%;  border-radius: 50%;  transition: transform 0.5s;  
}  .img-fluid:hover {  transform: rotate(360deg);  
}  .bio, .career, .achievements, .teams, .personal-life {  background: rgba(34, 34, 34, 0.8);  color: #f0f0f0;  padding: 20px;  border-radius: 8px;  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  
}  h1, h2 {  margin-top: 0;  
}  .list-group-item {  background: transparent;  color: #f0f0f0;  border: none;  
}  .footer {  background-color: #1a1a1a;  color: #f0f0f0;  text-align: center;  padding: 10px;  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.3);  
}