[Bootstrap]3分钟入门Bootstrap

最新推荐文章于 2024-07-20 15:49:14 发布
置顶 最新推荐文章于 2024-07-20 15:49:14 发布
阅读量468 收藏 1
点赞数 2
分类专栏： Full Stack Developer Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013716535/article/details/105956030
版权

目录

什么是bootstrap

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

  • 简单说，以前需要html+css写页面的菜单，头，轮播图，用户列表，尾部等等模块，现在可以直接使用boostrap框架，把想要的样式模块直接复制到自己的代码中使用，使开发更加简洁。而且bootstrap是自适应的，可以多平台(mobile/ipad/pc)覆盖。

自适应设计，为不同类别的设备建立不同的网页，检测到设备分辨率大小后调用相应的网页。

在这里插入图片描述

具体使用bootstrap

  • 安装编辑器 （vscode/sublime/atom都可以）
  • 安装bootstrap,实现hello world

引用

简介

如果只要css把boostrap链接添加到html里面head部分其他引用前面即可

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

需要使用js，按jQuery,Popper,Js 顺序引入

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

具体操作

  1. 创建一个demo1/1.html文件
  2. 复制下面代码到1.html
    在这里插入图片描述
  3. 直接双击1.html文件，结果显示
    在这里插入图片描述

下载安装

简介

  • 点击下载
    在这里插入图片描述
  • 两个选择，下面例子选Compiled CSS and JS
    Compiled CSS and JS：下载 Bootstrap CSS、JavaScript 和字体的编译版本
    Source files：下载源代码，得到最新的 Bootstrap LESS 和 JavaScript 源代码

具体操作

  1. 点击下载(Compiled CSS and JS)，获取一个zip包

  2. 目录结构，把zip包内容复制过来
    在这里插入图片描述

  3. 修改demo1里面1.html代码，改为2.html，主要改引用部分

    <!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <title>Hello, world!</title>
</head>

<body>
    <h1>Hello, world!</h1>


</body>

</html>

  4. 结果显示，前者是没有引入bootstrap
    在这里插入图片描述

npm安装

  • 因为bootstrap是依赖于jquery，所以两个都必须要安装。而且根据我查的资料npm安装大多和前端框架一块使用，如果只想做个html页面，建议用上面两者方式入门。
    Angular里面引入bootstrap

注意事项

  1. HTML5 doctype 必须有，不然页面效果会出问题

    <!doctype html>
<html lang="en">
  ...
</html>

  2. viewport必须有，不然自适应会出问题

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

视频

如何快速使用官网example制作html页面

实战

Bootstrap登录页面
Bootstrap制作简单博客

本节代码

参考链接

https://getbootstrap.com/

螺丝钉tina
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Bootstrap
weixin_53037175的博客
12-13 558
Bootstrap 来自Twitter，是目前很受欢迎的前端框架。 它是基于HTML、CSS、JAVASRIPT的，简洁灵活，使得Web开发更便捷。 它有大量的组件样式，这也是它的优点也是缺点，如果我们有特殊的需求，得专门去定制这样式，这样的话，一个网站有大量的非Bootsatrap样式存在，那我们得做大量的CSS重写，这样就失去了其框架的意义。 Bootstrap有个很重要的特性—响应式设计。它支持不同终端来显示同一套代码。 1、Bootstrap全局css样式之布局容器和栅格系统 栅格系统用于通过一系列
bootstrap
weixin_44654375的博客
02-15 2377
bootstrap 能够完成BootStrap环境搭建 能够理解bootstrap的栅格系统 能够查询文档创建BootStrap的按钮、表格、表单等常用组件 能够查询文档使用BootStrap的轮播图、分页条 能够利用Bootstrap完成网站首页 第一章 bootstrap简介 1.1 bootstrap概述 1.1.1 什么是bootstrap Bootstrap，基于 HTML、CSS、...
万字长文解析Bootstrap权威教程：从入门到精通逐步掌握前端开发框架
最新发布
科技改变人类，技术成就未来
07-20 1137
Bootstrap 是世界上最受欢迎的前端框架之一，由 Twitter 团队开发和开源。它使得开发响应式、移动优先的网站变得简单和快速。本文将为初学者提供一个全面的 Bootstrap 入门指南，覆盖从基本概念到高级功能，以及如何在实际项目中应用 Bootstrap。
JAVA从零开始学习知识整理——HTML——day05—【Bootstrap】
weixin_44167508的博客
01-26 282
一、Bootstrap 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插...
bootstrap table使用入门基本用法
08-30
Bootstrap Table 使用入门基本用法 Bootstrap Table 是一种常用的 TABLE 显示控件，经常出现在项目中。下面将详细介绍 Bootstrap Table 的使用入门基本用法。 下载和安装Bootstrap Table 第一步：下载 Bootstrap ...
bootstrap从入门到精通
12-17
本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将...教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。
Bootstrap入门教程一Hello Bootstrap初识
01-19
Bootstrap是基于 HTML5、CSS3和Javascriopt开发的，它在 jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件，为实现快速开发提供了一套前端工具包，包括丰富的...
Bootstrap 项目实战（入门版）
09-24
3. **CSS样式**：Bootstrap使用Sass作为其CSS预处理器，提供了一套完整的样式库，包括颜色、字体、间距和过渡效果。学习如何有效地利用这些样式将使你的页面更加专业和统一。 4. **JavaScript插件**：Bootstrap还...
BootStrap的简单介绍
热门推荐
星空之尘的博客
05-23 2万+
BootStrap 概念：一个前端开发的框架，Bootstrap是基于html、css、Javascript的。 框架：框架是一个半成品软件，开发人员可以在框架基础上进行开发，简化编码。 好处： ① 定义了许多CSS样式和js插件。开发者可以直接引用这些样式和插件。 ② 响应式布局：同一套页面可以兼容不同分辨率的设备。 快速入门 下载Bootstrap 下载后有三个文件夹，将这三个文件夹复制到项目中 创建html页面，引入必要的资源 <!DOCTYPE html> <h
Bootstrap 学习（一）入门
子冰吖的博客
04-10 5382
一：什么是Bootstrap？ Bootstrap是目前留下的前端框架之一，具备已下特点： 基于HTML、CSS、JavaScript开发的； 样式展现方面定义了大量全局样式、列表、按钮等样式组件； 特效方面实现了轮播、菜单等常用的js控件； 样式采用less编写，js调用了jquery库； 来自Twitter，现在委托保管再github上。 Bootstrap适用于网站的开发，不适用于管理系...
Bootstrap框架快速入门与实战指南
一、Bootstrap入门 Bootstrap的官方网站（http://www.bootcss.com/ 和 http://v3.bootcss.com/）是获取最新信息和文档的好地方。要开始使用Bootstrap，首先需要下载资源包（http:www.bootstrap.com），然后在项目中...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值