开始使用Bootstrap
Bootstrap是一个用于开发响应式Web项目的前端框架。它有一个强大的网格系统、灵活的媒体对象和一个强大的颜色系统。
Mark Otto和Jacob Thornton使用HTML5、Sass和CSS3开发了Bootstrap。
使用Bootstrap的优点。
- 它节省了时间和精力。有了Bootstrap，你可以专注于编写内容，框架会处理其余的事情。
- 开发人员可以使用Bootstrap定制他们的网站，以满足他们的需求。
- Bootstrap是响应式的。它可以在任何设备上使用而不会崩溃。
- Bootstrap有一个简单的网格系统来开发响应式网站。
前提条件
要跟上本教程，你需要具备以下条件。
- [HTML]和[CSS]的基本知识。
- 安装一个IDE，最好是[Visual Studio Code]。
开始学习
开发Bootstrap是为了帮助加快响应式网站的开发。世界各地的许多公司和项目都在使用Bootstrap。
下载Bootstrap
要使用Bootstrap，你需要下载其文件并将其添加到你的项目中。在本教程中，我们将使用Node Package Manager 来安装Bootstrap。
要做到这一点，我们首先需要安装[Node.js]((https://nodejs.org/en/)，因为它有npm 包管理器。
根据你的操作系统下载最新的文件，并安装它们。
安装后，导航到你下载文件的文件夹，在终端运行以下命令。
npm install bootstrap
该命令将创建一个名为node_modules 的新文件夹。该文件夹包含Bootstrap所需的文件。这些文件是：
/bootstrap- 它包含 和 文件。本教程将使用这些文件。JSCSS/.package-lock.json- 这个文件记录了bootstrap文件的版本。/@popperjs- 这个文件夹包含了 库所需的文件。popper.js
如何在你的项目中使用Bootstrap文件
在包含已安装的bootstrap文件的文件夹中，创建一个index.html 文件并添加下面的代码片段。
<html>
<head>
<title>Getting Started with Bootstrap</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="node_modules/bootstrap/dist/css/bootstrap.css"
type="text/css"
/>
</head>
<body>
<div class="alert alert-success">
<strong> Congratulation!</strong>
<p>Bootstrap is working Successful!</p>
</div>
</body>
</html>
在上面的代码中，我们已经将bootstrap file 导入到我们项目的head 部分中。在你的浏览器中打开index.html 文件。
如果你看到提示框，那么你已经成功安装了bootstrap。祝贺你!
我们将在本教程的所有例子中使用上述
index.html。
1.容器
在bootstrap中，container 是一个页面的整个部分的包装。它是一个用来包含页面内容的块状元素。容器将内容排列在一个设备或一个视点内。
容器的语法如下。
<div class="container">
<!-- other code here -->
<div></div>
</div>
2.行
行是列的封装器。它们用于对齐列中的内容。它们有助于结构化网格系统，因此，保持一切有序。
行的语法如下。
<div class="row"></div>
3.尊宝娱乐平台
Jumbotron是一种特殊类型的容器，允许特定的内容脱颖而出。它是一个块状元素，包含页面的内容。
Jumbotron使用一个带有圆角的灰色盒子来显示。Jumbotron里面的文字的字体大小也会被放大。你可以把尊宝平台手机版放在容器内部或外部。
将尊宝平台手机版放置在容器内
如果你在容器内添加引导器，它将不会延伸到屏幕的边缘。
假设你想在上面的index.html 文件中添加一个Jumbotron，那么语法将如下所示。
<div class="container">
<div class="jumbotron">
<h3>Section Community</h3>
<p>
Section is backed by a group of top-shelf Venture Capital firms, led by
the Foundry Group.
</p>
</div>
</div>
将Jumbotron放在容器外面
这个方法将导致Jumbotron延伸到屏幕的边缘。
为了更好地理解这一点，将下面的代码片段放在index.html 文件中，并在浏览器中打开。
<div class="jumbotron">
<div class="container">
<h3>Section Community</h3>
<p>
Section is backed by a group of top-shelf Venture Capital firms, led by
the Foundry Group.
</p>
</div>
</div>
当这两个代码段被比较时，第二个代码段将导致Jumbotron延伸到屏幕的边缘，而第一个代码段则不会。
4.Bootstrap塌陷
collapse是一个允许你隐藏和显示内容的组件。它是一个块状元素，用于包含页面的内容。
它有助于给内容以更多的重要性或额外的关注。例如，如果你有很多内容，导航条最终可能会在移动设备上占用太多的空间。因此，这就是折叠的作用。
为了实现这一点，你需要在我们的index.html 文件中添加以下代码。
<html>
<head>
<title>Getting Started with Bootstrap</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<a href="#demo" class="btn btn-info" data-toggle="collapse">
Click On Me
</a>
<div id="demo" class="collapse">
<h5 style="color: blueviolet; font-size: larger;">Section</h5>
<ol>
<a href="https://www.section.io/about/"><li>About</li></a>
<a href="https://www.section.io/contact-us/"><li>Contact</li></a>
</ol>
</div>
</div>
</div>
</body>
</html>
在上面的代码片段中，我们已经将collapse 加入到页面中。当你按下Click On Me 按钮时，collapse 有About 和Contact 菜单项将被显示。
5.Bootstrap模态插件
Bootstrap modal插件是一个当你点击一个按钮时弹出的对话框。它显示在一个页面的顶部。
下面的例子显示了如何使用模态插件。
<html>
<head>
<title>The Modal</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div style="border: 1px solid; width: 900px; height: 300px;">
<div class="container">
<button
type="button"
class="btn btn-info"
data-toggle="modal"
data-target="#modal"
>
Click on me for the modal
</button>
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<p>You have created a modal. Congrats!</p>
</div>
<div class="modal-body">
<p>More information</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-default"
data-dismiss="modal"
>
Exit
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
6.Bootstrap进度条
进度条是一个显示任务进度的组件，例如，软件的安装。进度通常以百分比的形式表示。
在index.html 文件中，用下面的片段替换现有的片段，并在浏览器中打开该文件。
<html>
<head>
<title>progress bar</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="border: 1px solid; width: 300px; height: 150px; top: 50%; ">
<h5>Example of a Progress bar</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="10" style="width: 57%;">
67% Complete
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="10" style="width: 82%;">
82% Complete
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="10" style="width: 100%;">
100% Complete
</div>
</div>
</div>
</body>
</html>
7.Bootstrap媒体对象
媒体对象是一个显示媒体对象的组件。它显示图片、视频和其他媒体内容。它们伴随着一个right-aligned 或left-aligned 图像和文本内容。
假设你有一个图片media.jpg ，你想在图片的右边添加一些描述图片的内容。你可以使用下面的片段来完成这项任务。
<html>
<head>
<title>Media Object</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3" >
<div class="media border p-3 ">
<img src="img/media.jpg" alt="media" class="mr-3 mt-3 rounded-circle" style="width: 40px;">
<div class="media-body" >
<h6><strong>Peter</strong>Joined Section on 1st June 2020</h6>
<p>Peter is currently a reviewer.</p>
</div>
</div>
</div>
</html>
8.Bootstrap星级评定
星级评价是一个允许终端用户对产品或服务进行评价的组件。填充的星星数表示用户选择的星星数。
假设你要求用户对你的工作进行评价，然后他只点击了两颗星。下面的片段显示了你会得到的反馈。
<html>
<head>
<title>Rating Star</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<div class="rating" style="border: 1px solid; width: 300px; height: 100px; top: 50%;">
<h5>Please Rate my work</h5>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<style>
.checked {
color: red;
}
.rating {
position: absolute;
border-bottom: 20px;
margin-left: 500px;
text-align: center;
}
</style>
</body>
</html>
在上面的例子中，我们用star icon 来表示星级。
9.Bootstrap flexbox
flexbox是一个组件，它允许你创建一个可以轻松调整大小的布局。
要改变flexbox的对齐方式，你可以使用`justify-content属性，如下面的片段所示。
<html>
<head>
<title>Bootstrap Flex</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css"/>
</head>
<body>
<div class="container" style=" width: 400px; height: 600px; border: 1px solid; top: 60px; position: absolute; margin-left: 500px;">
<h6 style="text-align: center;">Example of a Flix</h6>
<div class="d-flex justify-content-end bg-secondary mb-3">
<!--flex items aligned at the end -->
<div class="p-2 my-flex-item">A</div>
<div class="p-2 my-flex-item">B</div>
<div class="p-2 my-flex-item">C</div>
<div class="p-2 my-flex-item">D</div>
</div>
<div class="d-flex justify-content-center bg-secondary mb-3">
<!-- flex items aligned at the center -->
<div class="p-2 my-flex-item">A</div>
<div class="p-2 my-flex-item">B</div>
<div class="p-2 my-flex-item">C</div>
<div class="p-2 my-flex-item">D</div>
</div>
<div class="d-flex justify-content-left bg-secondary mb-3">
<!-- flex items aligned on the left -->
<div class="p-2 my-flex-item">A</div>
<div class="p-2 my-flex-item">B</div>
<div class="p-2 my-flex-item">C</div>
<div class="p-2 my-flex-item">D</div>
</div>
<div class="d-flex flex-column bg-secondary mb-3 my-flex-container-column">
<!-- flex items aligned in a column manner -->
<div class="p-2 my-flex-item">A</div>
<div class="p-2 my-flex-item">B</div>
<div class="p-2 my-flex-item">C</div>
<div class="p-2 my-flex-item">D</div>
</div>
<div class="d-flex flex-column flex-column-reverse bg-secondary mb-3 my-flex-container-column">
<!-- reverse order of the column -->
<div class="p-2 my-flex-item">A</div>
<div class="p-2 my-flex-item">B</div>
<div class="p-2 my-flex-item">C</div>
<div class="p-2 my-flex-item">D</div>
</div>
</div>
</body>
</html>
10.单选按钮
单选按钮是允许终端用户从一组选项中选择一个选项的组件。每个单选按钮都包含一个标签，代表每个单选按钮的选择。
请注意，一个单选按钮只能选择一次，而复选框可以选择多次。
下面是一个单选按钮片段的例子。
<html>
<head>
<title>Radio Buttons</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="node_modules/bootstrap/dist/js/bootstrap.js.map" type="text/css">
</head>
<body>
<div class="container" style=" background-color: grey; width: 400px; height: 200px; border: 1px solid; top: 60px; position: absolute; margin-left: 500px;">
<div class="form-check">
<h6 style="text-align: center;">Select your Gender</h6>
<div >
<input class="form-check-input" name="inlineRadioOptions" type="radio" value="male" id="inlineRadio1" >
<label class= "form-check-label"for="inlineRadio1">Male</label>
</div>
<div>
<input class="form-check-input" name="inlineRadioOptions" type="radio" value="female" id="inlineRadio1" >
<label class= "form-check-label"for="inlineRadio1">Female</label>
</div>
<div>
<input class="form-check-input" name="inlineRadioOptions" type="radio" value="others" id="inlineRadio1" >
<label class= "form-check-label"for="inlineRadio1">Others</label>
</div>
</div>
</div>
</body>
</html>
下面是一个复选框片段的例子。在这里，你会注意到，你可以选择一个以上的选项，这与上面的单选按钮不同。
<html>
<head>
<title>check box</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="node_modules/bootstrap/dist/js/bootstrap.js.map" type="text/css">
</head>
<body>
<div class="container" style=" background-color: grey; width: 400px; height: 200px; border: 1px solid; top: 60px; position: absolute; margin-left: 500px;">
<div class="form-check">
<h6 style="text-align: center;">What type of food do you like?</h6>
<div >
<div>
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label for="food"> Pizza</label>
</div>
<div>
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label for="spaghet">Spaghet</label>
</div>
<div>
<input type="checkbox" class="form-check-input" id="exampleCheck1" >
<label for="pilau">Pilau</label>
</div>
</div>
</div>
</body>
</html>
11.网格系统
Bootstrap网格系统是一个12列的系统，用于布局内容。它由containers,rows, 和columns 组成。
container是最外层的元素，用来包含所有其他元素。row创建一个水平的列组。column是最里面的元素，用于包含内容。
让我们看看网格系统是如何在一个代码片段中工作的。
<html>
<head>
<title>Grid System</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="node_modules/bootstrap/dist/js/bootstrap.js.map" type="text/css">
</head>
<body>
<div class="container" style=" width: 400px; height:350px; border: 1px solid;
top: 60px; position: absolute; margin-left: 500px;">
<div class="row">
<h6 style="text-align: center;">3 equal collums</h6>
<div class="col-md-4">
<p>This is the first columns</p>
</div>
<div class="col-md-4">
<p>This is the second columns</p>
</div>
<div class="col-md-4">
<p>This is the third columns</p>
</div>
</div>
<div class="row">
<h6 style="text-align: center;">2 equal collums</h6>
<div class="col-md-6">
<p>This is the first columns</p>
</div>
<div class="col-md-6">
<p>This is the second columns</p>
</div>
</div>
<div class="row">
<h6 style="text-align: center;">3 uequal collums</h6>
<div class="col-md-4">
<p>This is the first columns</p>
</div>
<div class="col-md-5">
<p>This is the second columns</p>
</div>
<div class="col-md-3">
<p>This is the third columns</p>
</div>
</div>
</div>
</body>
</html>
12.列表
列表是一系列被分组在一个container 中的项目。列表可以是有序的或无序的。
要创建一个列表，请使用ul/ol 和li 标签，并分别使用.list-group 和.list-item-group 。
有序列表
有序列表是一个在每个项目上都有一个数字索引的列表。
<html>
<head>
<title>List</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="node_modules/bootstrap/dist/js/bootstrap.js.map" type="text/css">
</head>
<body>
<div class="container">
<h6>ordered list item</h6>
<ol class="list-group">
<li>First list</li>
<li>Second list</li>
<li>Third list</li>
</ol>
</ul>
</div>
</body>
</html>
无序列表
无序列表中的每一项都没有数字索引。默认情况下，它们是用子弹头来标记的。
<html>
<head>
<title>List</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="node_modules/bootstrap/dist/js/bootstrap.js.map" type="text/css">
</head>
<body>
<div class="container">
<h6>unordered list item</h6>
<ul class="list-group">
<li>First list</li>
<li>Second list</li>
<li>Third list</li>
</ul>
</ul>
</div>
</body>
</html>
在上面的代码片段中，我们使用了ol 标签来创建一个有序列表，使用ul 标签来创建一个无序列表。
带链接的列表
一个列表也可以包含连接到其他页面的links 。
<html>
<head>
<title>List</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="node_modules/bootstrap/dist/js/bootstrap.js.map" type="text/css">
</head>
<body>
<div class="container">
<h6>An ordered list with links</h6>
<div class="list-group">
<ol>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.section.io">Section</a></li>
</ol>
</div>
</div>
</body>
</html>
13.Bootstrap表单
一组elements ，允许用户根据需要输入不同的数据，form 。
一个简单的基本表单可能包含输入字段，如name 、email 、password 、text area 、checkbox 。
下面的片段是一个引导式表单的例子。
<html>
<head>
<title>Form</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="node_modules/bootstrap/dist/js/bootstrap.js.map" type="text/css">
</head>
<body>
<div class="container" style=" width: 400px; height:350px; border: 1px solid;
top: 60px; position: absolute; margin-left: 500px;">
<h6>Please fill the form below</h6>
<div class="form-group">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" placeholder="Enter Your name" required = "true">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control" placeholder="Enter Your email" required = "true">
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Enter Your subject" required = "true">
</div>
<div class="form-group">
<label for="message">Message</label>
<input type="text_area" name="message" class="form-control" placeholder="Enter Your message" required = "true">
</div> <br>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</body>
</html>
14.Bootstrap scrollspy
一组元素，允许用户滚动到页面的特定部分。它自动更新导航栏以突出当前的部分/链接。
下面的片段是一个Bootstrap scrollspy的例子。
<html>
<head>
<title>Bootstrap Scrollspy</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#footer">Footer</a></li>
</ul>
</nav>
<div class="col-sm-9">
<div id="home">
<h1>Home Page</h1>
<p>This is the home page.</p>
</div>
<div id="about">
<h1>About</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Nemo optio consequatur, dignissimos necessitatibus magni doloremque
tempora in obcaecati sit sint! Perspiciatis quidem,
voluptatem suscipit dolorem iure dicta cupiditate aut saepe?</p>
</div>
<div id="services">
<h1>Services</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Nemo optio consequatur, dignissimos necessitatibus magni doloremque
tempora in obcaecati sit sint! Perspiciatis quidem,
voluptatem suscipit dolorem iure dicta cupiditate aut saepe?</p>
</div>
<div id="contact">
<h1>Contact</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Nemo optio consequatur, dignissimos necessitatibus magni doloremque
tempora in obcaecati sit sint! Perspiciatis quidem,
voluptatem suscipit dolorem iure dicta cupiditate aut saepe?</p>
</div>
<div id="blog">
<h1>Blog</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Nemo optio consequatur, dignissimos necessitatibus magni doloremque
tempora in obcaecati sit sint! Perspiciatis quidem,
voluptatem suscipit dolorem iure dicta cupiditate aut saepe?</p>
</div>
<div id="footer">
<h1>Footer</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Nemo optio consequatur, dignissimos necessitatibus magni doloremque
tempora in obcaecati sit sint! Perspiciatis quidem,
voluptatem suscipit dolorem iure dicta cupiditate aut saepe?</p>
</div>
</div>
</div>
</div>
</body>
</html>
让我们给滚轴spy添加一些样式。
<style>
body {
position: relative;
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-sm-9 div {
height: 250px;
font-size: 28px;
}
#home {background-color: blue;}
#about {background-color: purple;}
#footer {background-color: red;}
#services {background-color: gray;}
#blog {background-color: brown;}
#contact {background-color: black;}
</style>
结论
Bootstrap可以用来创建高度吸引人的网站。它是一个流行的框架，许多公司，包括Spotify和Twitter，都使用它。
