BootStrap入门

BootStrap简介

BootStrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目

注意:

BootStrap 针对 响应式布局的项目

1. 响应式布局

一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本

原理

响应式的原理其实就是CSS3新特性的媒体查询,这个知识点可以回顾CSS基础知识

例:媒体查询简单回顾:

要求:宽度小于768px为手机屏幕,背景设置为红色;宽度大于768px ,小于992px为平板屏幕,背景设置为蓝色;宽度大于992px为电脑屏幕,背景设置为绿色。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>媒体查询t</title>
    <style>
        /* 小于768:手机屏幕 */
        @media screen and (max-width: 768px){
            body{
                b
### Bootstrap 入门教程 Bootstrap 是一个流行的前端框架,旨在帮助开发者快速创建响应式网站和应用程序。以下是关于 Bootstrap 的基础知识及其使用指南: #### 什么是 BootstrapBootstrap 是一个开源 HTML、CSS 和 JavaScript 框架,专注于简化 Web 开发过程[^1]。它提供了一系列预定义的样式类和组件,使开发人员能够轻松设计具有现代外观的网页。 #### 安装与引入 可以通过以下两种方式之一来安装并引入 Bootstrap: - **CDN 方式**:这是最简单的方法,只需在 `<head>` 部分添加以下代码即可加载最新版本的 Bootstrap。 ```html <!-- CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- JS (如果需要交互功能) --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> ``` - **下载本地文件**:访问 [Bootstrap官网](https://getbootstrap.com/) 下载压缩包,并将其解压到您的项目目录中。随后,在 HTML 文件中链接对应的 `css` 和 `js` 文件。 #### 基础网格系统 Bootstrap 提供了一个强大的栅格布局系统,允许您根据屏幕尺寸自适应调整内容排列。默认情况下,该系统分为 12 列。例如: ```html <div class="container"> <div class="row"> <div class="col-md-6">Column 1</div> <!-- 占一半宽度 --> <div class="col-md-6">Column 2</div> <!-- 占另一半宽度 --> </div> </div> ``` #### 样式类简介 Bootstrap 中有许多内置的实用程序类可以帮助快速定制页面元素。一些常见的类别包括但不限于颜色修饰 (`text-primary`, `bg-danger`)、按钮样式 (`btn`, `btn-success`) 及表单控件等。 #### 实际案例演示 假设我们要制作一个简单的登录界面,则可以利用如下代码片段实现: ```html <form> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">Password</label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> ``` #### 扩展阅读与其他资源 对于希望深入研究或探索更多高级特性的用户来说,还可以考虑查看其他相关扩展库,比如专门针对 Vue 用户设计的 **BootstrapVue**[^2] 或者用于邮件模板构建的 **Bootstrap Email**[^3]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林林一928

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值