Bootstrap4 教程
Bootstrap4 教程
Bootstrap 是Twitter公司开发的一个前端框架,它可以极大地加速web开发的过程,并且提升了开发的质量和效率。Bootstrap通过开发人员可用的HTML、CSS和JavaScript组件库,加速开发人员开发在各种设备上的响应式和移动先的web应用程序。本文主要介绍Bootstrap4的使用方法,让读者能够快速地学会如何使用Bootstrap4开发响应式的网站。
使用方法
引入Bootstrap4文件:“bootstrap.min.css”和“bootstrap.min.js”文件,这样网站就可以使用Bootstrap4的组件库了。在HTML文档的头部引用以下代码即可:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.0.0/js/bootstrap.min.js"></script>
响应式布局
Bootstrap4使用12栅格系统(grid system),一行可以分为1到12个列,你可以使用这些列来创建响应式布局,以适应各种不同的设备尺寸。以下是示例代码:
<div class="container">
<div class="row">
<div class="col-sm-4">Column 1</div>
<div class="col-sm-4">Column 2</div>
<div class="col-sm-4">Column 3</div>
</div>
</div>
在上面的代码中,.row类定义布局的一行,而.col-sm-4定义一个列,代表列占据了12栅格系统中的4个栅格,也就是一行分为3个相等的部分。在不同的设备上,你可以使用.col-md-,.col-lg-,.col-xl-*等来控制列的宽度。
外观组件
开发web应用时,你不必再费劲地创建CSS样式来定义按钮、导航栏、表单、模态框等组件,Bootstrap4已经为你提供了这些样式。以下是示例代码:
Buttons
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Navigation Bar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</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">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
以上是一个简单的导航栏示例。
Forms
Bootstrap4提供了许多预先定义好的CSS类,可用于创建漂亮的表格、表单和输入框等组件。以下是示例代码:
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Modal
模态框是Bootstrap4中最常用的组件之一,可以在需要时显示弹出框来引导用户进行相关操作。以下是示例代码:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal body text goes here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
以上示例代码包括一个按钮和一个模态框,当用户点击按钮时,模态框就会弹出来。
总结
本文详细地介绍了Bootstrap4的使用方法,从响应式布局、外观组件到模态框等组件都有详细的示例代码。读者可以按照示例代码,快速地学习Bootstrap4的使用方法,提高Web开发的速度和准确度。