Bootstrap——安装、导入以及简单使用

最新推荐文章于 2024-04-26 15:04:54 发布
最新推荐文章于 2024-04-26 15:04:54 发布
阅读量7.7k 收藏 51
点赞数 11
分类专栏： Java基础自学笔记 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46508271/article/details/118651894
版权

Bootstrap安装和使用

bootstrap简介

Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简单，粗暴。

安装bootstrap

1、进入bootstrap官网

2、选择版本，点击下载bootstrap（这里以v4.6为例）

在这里插入图片描述

3、点击下载bootstrap生产文件在这里插入图片描述

4、解压文件

在这里插入图片描述

也可以直接导入Boostrap CDN

https://www.bootcdn.cn/twitter-bootstrap/

<head>
  <meta charset="UTF-8">
  <title>网格系统</title>
  <!--CDN导入-->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
</head>

注意版本！

bootstrap的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网格系统</title>
    <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css"/>
</head>
<body>
<!--
容器布局:
  container 类用于固定宽度并支持响应式布局的容器。
  container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
-->
<div class="container">
  <!--行元素-->
  <div class="row">
    <!--
    列元素:一行总共12列，如果超过了12列则会到下一行
    -->
    <div class="col-md-4" style="background-color: red">第一块</div>
    <div class="col-md-4" style="background-color: #1e7e34">第二块</div>
    <div class="col-md-4" style="background-color: #005cbf">第三块</div>
  </div>

  <div class="row">
    <div class="col-md-4" style="background-color: #20c997">第一块</div>
    <div class="col-md-4" style="background-color: #dc3545">第二块</div>
    <div class="col-md-5" style="background-color: #491217">第三块</div>
  </div>

  <div class="row">
    <div class="col-md-3 offset-md-10">
      <button type="submit" style="background-color: #4e555b">提交</button>
    </div>
  </div>
</div>
</body>
</html>

在这里插入图片描述

具体使用可以查看：菜鸟教程

在这里插入图片描述

一条有梦想的咸鱼-
关注
  • 11
    点赞
  • 踩
  • 51
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap Modal的“上一步”，“下一步”切换功能的实现
无懈一击的博客
06-19 1万+
1.功能分析  当我们注册用户信息的时候，系统会弹出一个模态框。如果需要填写的表单信息比较多，就会按照模块分步骤显示。当第一个模块填写完毕后，我们点击下一步，则下一个模块会覆盖当前模块，直到最后提交。同时，我们也可以返回上一步，重新填写。   笔者针对代码的重用性和拓展性，实现了一个Bootstrap Modal分步填写表单的小插件，同时兼顾首页，尾页，中间页，单页等情况下的模块切换方式，代码尽力
bootstrap安装环境，入门教程
02-21
bootstrap安装环境，bootstrap入门教程,有实例
Bootstrap的安装和使用
weixin_46128831的博客
01-22 3249
1.BootStrap简介 Bootstrap是由美国Twitter公司开发的一种前端框架，用来快速开发响应式布局、移动设备优先的Web项目，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简单，粗暴。 2. BootStrap特点 ...
Bootstrap安装的过程
最新发布
旺仔Sec&blog
04-26 816
Bootstrap是一种流行的前端框架，用于快速开发响应式和移动设备优先的网站和Web应用程序。它由Twitter开发，并在2011年开源发布。Bootstrap提供了一组预定义的CSS样式和JavaScript插件，包括网格系统、按钮、表单、导航栏等，使开发者能够轻松地创建现代化和美观的界面。**
Bootstrap教程——快速上手（最给力的前端框架）
只想AC的博客
06-03 5134
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码
Bootstrap --》Bootstrap的安装与使用
ztK63LrD的博客
09-14 2214
Bootstrap5 是 Bootstrap 的最新版本，使用了新组件、更快的样式表以及拥有更快的响应能力。Bootstrap来自 Twitter (推特)，是一个 CSS 框架，是目前最受欢迎的前端框架，可以更轻松地创建网站和 Web 应用程序用户界面。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。
Bootstrap入门到精通（最全最详细）
Debug的博客
02-22 1068
随着Bootstrap的问世，Web开发者不必再花费时间、费力地编码，只需找到合适的代码，插入到合适位置即可。此外，CSS利用LESS编写，很多样式和设计都已设计完成。以上就是今天要讲的内容，本文目前简单介绍了Bootstrap的使用，后续还会继续更行。
BootStrap入门基础
weixin_53270267的博客
04-17 1064
bootstrap新手入门 1.下载bootstrap bootstrap官网 下载完成后是一个压缩包 如下图 2.在项目中将这三个文件夹复制 3.创建html页面，引入必要的资源文件 ​
bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例
12-06
在本话题中，我们聚焦于Bootstrap Table的一个扩展功能——可编辑下拉框，这得益于`bootstrap-table-editable`插件的使用。这个插件允许用户在表格的单元格内直接进行编辑，包括选择下拉框中的值。 `bootstrap-...
springboot+mybatis+bootstrap整合的简单框架
10-11
本项目"springboot+mybatis+bootstrap整合的简单框架"旨在提供一个快速开发的解决方案，将三个流行的开源技术——Spring Boot、MyBatis和Bootstrap融合在一起，以简化Web应用的构建过程。 Spring Boot是由Pivotal...
在ASP.NET Core 2.2 Web应用程序项目中自定义Bootstrap
04-07
最后，对于复杂的自定义需求，可能需要使用Sass（Syntactically Awesome Style Sheets）——Bootstrap的源码是用Sass编写的。通过安装Sass编译器，我们可以直接编辑`.scss`文件，然后编译成CSS。这样，我们就可以...
Bootstrap视频教程百度云盘下载地址
08-12
之前学习过的一个视频教程，关于Bootstrap的视频教程
Python库 | py_bootstrap-0.0.2.tar.gz
03-09
在描述中提到了“资源全名：py_bootstrap-0.0.2.tar.gz”，这意味着这个库有一个特定的版本号——0.0.2。在软件开发中，版本号用于标识软件的不同状态，通常遵循语义化版本管理（Semantic Versioning），格式为`主...
Python库 | dash-bootstrap-templates-1.0.0.tar.gz
03-02
安装dash-bootstrap-templates后，你可以通过导入相应的模板并设置其属性来应用到你的应用中。例如，要使用'simple'模板，可以这样操作： ```python import dash import dash_bootstrap_components as dbc ...
Bootstrap V3下载安装及如何在html中导入使用
m0_71500484的博客
08-15 785
1.进入Bootstrap中文网 https://www.bootcss.com/；jquery 也需提前下载好，同 Bootstrap 一般，找到官网，下载即可。分类点击 javaScript 选择功能Carousel。2.js 文件在 body 中用 script 导入；在编译器中新建个文件夹，导入的时候好找。2.点击进入Bootstrap V3;4.下载Bootstrap。6.解压完后点进来是个这。5.下载出来是个压缩包。
Bootstrap4基础入门到精通
10-11
从Bootstrap的基础知识，如何安装，如何变通简易的调用讲起，逐步讲解Bootstrap中的CSS相关布局、布局组件如何调用；讲解Bootstrap相关的插件；同步实战代码和演练解说。
Bootstrap的安装
qq_43704651的博客
10-30 1688
本地安装Bootstrap 下载Bootstrap 1、下载源代码版Bootstrap 到GitHub上下载Bootstrap压缩包 https://github.com/twbs/bootstrap/ 单击Download ZIP按钮，下载最新版的Bootstrap压缩包，下载完成后解压 2、 下载编译版Bootstrap 如果需要快速使用Bootstrap来开发网站，就可以直接下载经过编译、压缩后的发布版本，使用浏览器访问下面页面： https://getbootstrap.com/docs
bootstrap安装与使用
qq_41949802的博客
08-29 5921
下载地址：http://www.bootcss.com/        下载的文件解压后，内部有三个文件夹 打开链接 https://jquery.com/download/ ctrl+A全选后复制，新建一个名为jquery.js的文件，把刚才复制的粘贴进去，然后把jquery.js文件拉到js文件夹中      然后在bootstrap空白项目中新建一个index.html文件...
pyecharts 无法找到bootstrap/base.html
ttinch的博客
08-13 1415
pyecharts1.3.1采用jinja2 Markup渲染网页， return Markup(chart.render_embed(template_name='index.html')) {% extends "bootstrap/base.html" %} 提示 jinja2.exceptions.TemplateNotFound: bootstrap/base.html 调用路径：...
bootstrap5 npm安装使用
07-20
要使用 Bootstrap 5，首先你需要确保你的项目已经安装了 Node.js 和 npm。然后，按照以下步骤进行安装和使用： 1. 在你的项目目录下打开终端或命令提示符窗口。 2. 运行以下命令来初始化一个新的 npm 项目： ``` npm init -y ``` 这将创建一个默认的 `package.json` 文件。 3. 接下来，运行以下命令来安装 Bootstrap 5： ``` npm install bootstrap@next ``` 这将从 npm 仓库下载并安装最新的 Bootstrap 5 版本。 4. 安装完成后，在你的项目中创建一个新的 CSS 文件（例如 `styles.css`）。 5. 在 `styles.css` 文件中，使用以下内容导入 Bootstrap 的 CSS 文件： ```css @import '~bootstrap/dist/css/bootstrap.css'; ``` 这将确保你的项目中可以使用 Bootstrap 的样式。 6. 现在，你可以在你的 HTML 文件中使用 Bootstrap 5 的类和组件了。你可以从 Bootstrap 官方文档中找到所需的代码示例和文档：https://getbootstrap.com/docs/5.0/getting-started/introduction/ 记住，在使用 Bootstrap 5 之前，确保你已经了解了它的文档和用法。希望这个解答对你有帮助！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值