📅 最后修改于: 2023-12-03 14:39:33.039000 🧑 作者: Mango
Bootstrap 4 is a popular front-end framework for developing responsive and mobile-first websites. It is built on HTML, CSS, and JavaScript and provides a set of pre-built components and classes that make it easy to create beautiful and functional web pages.
Bootstrap 4 comes with a range of features that help developers create dynamic and engaging websites quickly and easily. Some of the key features of Bootstrap 4 include:
Bootstrap 4 is designed to be responsive, which means that websites built using the framework will automatically adjust to fit the screen size of the device being used to view them. This helps to ensure that your website looks great and functions well on all devices, from mobile phones and tablets to desktop computers and large, high-resolution displays.
Bootstrap 4 includes a wide range of pre-built components that can be used to add common features to your website, such as buttons, forms, alerts, modals, and much more. These components can be customized to meet the specific needs of your website, giving you a great deal of flexibility and control over the design and functionality of your site.
Bootstrap 4 makes use of a number of pre-defined CSS classes that can be used to add specific styles and functionality to different elements of your web page. For example, the .container class can be used to create a responsive container for your page content, while the .btn class can be used to create a button with a specific style and appearance.
To get started with Bootstrap 4, you can download the framework from the official website, or you can use a content delivery network (CDN) to include the necessary files in your project.
To download the latest version of Bootstrap 4, simply visit the official website and click the "Download" button. You will then be prompted to choose between downloading the complete framework or a custom build that includes only the components and features that you need.
If you prefer to use a CDN, you can include the necessary files by adding the following code to the <head> section of your HTML document:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/esm/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-Ogouqx/c91EAVwNRzQ+75GkdJoIEuSzI1kXRSgJ2QgiqXyApt+AzUweV6UivA6U5" crossorigin="anonymous"></script>
This will include the necessary files for Bootstrap 4 as well as jQuery and Popper.js, which are required for some of the components and features of the framework.
Here are a few examples of how Bootstrap 4 can be used to create beautiful and functional websites:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="jumbotron mt-3">
<h1 class="display-3">Welcome to my website</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ante urna. Integer eu justo sed nisi vulputate bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis sed posuere mauris.</p>
<a href="#" class="btn btn-primary btn-lg">Learn More</a>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Feature 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ante urna. Integer eu justo sed nisi vulputate bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis sed posuere mauris.</p>
</div>
<div class="col-sm-4">
<h3>Feature 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ante urna. Integer eu justo sed nisi vulputate bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis sed posuere mauris.</p>
</div>
<div class="col-sm-4">
<h3>Feature 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ante urna. Integer eu justo sed nisi vulputate bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis sed posuere mauris.</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-Ogouqx/c91EAVwNRzQ+75GkdJoIEuSzI1kXRSgJ2QgiqXyApt+AzUweV6UivA6U5" crossorigin="anonymous"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Contact Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">My Company</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 justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Contact <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div class="container">
<h1 class="my-4">Contact Us</h1>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email address">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" rows="5" placeholder="Enter your message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-Ogouqx/c91EAVwNRzQ+75GkdJoIEuSzI1kXRSgJ2QgiqXyApt+AzUweV6UivA6U5" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap 4 is a powerful and versatile front-end framework that can help you create responsive and mobile-first websites quickly and easily. By utilizing the pre-built components and classes provided by Bootstrap 4, you can achieve great results with minimal effort. Try it out for yourself and see how it can benefit your web development projects!