bootstrap的使用方法及其基本模板

article/2025/10/10 5:20:28

什么是Bootstrap

Bootstrap来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

如何使用

1.下载

bootstrap下载链接:https://v3.bootcss.com/getting-started/
下载有三个版本如果仅仅是使用的话下载第一个就行了
在这里插入图片描述

2.引入

只需要把下载好的文件解压拖入webstrom即可
在这里插入图片描述

3.基本模板

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --><title>使用模板</title><!-- Bootstrap地址,使用自己的地址就行了 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><!--兼容IE8--><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script></head>
<body>
<h1>你好,世界!</h1><!-- jQuery地址 (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- js地址下载文件中有(加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

模板注意点:

  • 3个meta标签*必须*放在最前面
  • 引入bootstrap地址
  • 引入jquery文件(Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边)
  • 引入下载文件中的js文件(bootstrap.min.js)

  • 4.使用方法

    1.在bootstrap官网中找到自己想要的功能(bootstrap中文官网:http://www.bootcss.com/)
    2.把模板复制到想要放置的位置
    例如:标签页的模板
    在这里插入图片描述把代码复制到想要放置的地方(我这里是放在了body里)。
    效果图:
    在这里插入图片描述3.修改样式,改成自己想要的


http://chatgpt.dhexx.cn/article/y1EwElHv.shtml

相关文章

BootStrap的下载及使用方法

关于BootStrap使用很简单&#xff0c;先进入它的官网http://www.bootcss.com/ 我们看上方的版本&#xff0c;这里咱们点开Bootstrap3&#xff0c;主页如图下 点击下载 下载左侧获得相关的css、javascript、font等文件&#xff0c; 这里的话&#xff0c;博主用的是3.3.5版本&am…

Spring boot使用Bootstrap

添加依赖 webjars https://www.webjars.org/ <!--引入bootstrap--> <dependency><groupId>org.webjars</groupId><artifactId>bootstrap</artifactId><version>4.0.0</version> </dependency> 查看依赖 页面引用…

BootStrap的使用(图文详解)

BootStrap的使用 ​ Bootstrap使用四步曲&#xff1a;1、创建文件夹&#xff1b;2、创建html骨架结构&#xff1b;3、引入相关样式文件&#xff1b;4、书写内容 一、创建文件夹结构 1、创建文件夹 ​ 按照以往的习惯创建文件夹。 2、下载Bootstrap ​ 在官网下载压缩包&…

Bootstrap使用

一、使用bootstrap步骤&#xff1a; 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容&#xff08;直接用bootstrap预先定义好的样式使用 修改bootstrap原来样式&#xff0c;注意权重问题&#xff09; 要想学好bootstrap的关键在于知道它定义了哪些样式&…

“手撕“ BootStrap 方法

文章目录 Part.I IntroductionChap.I bootstrap 方法简介Chap.II 预备知识 Part.II 非参数 bootstrap 方法Chap.I 估计量标准误差的bootstrap估计Chap.II bootstrap 置信区间Chap.III bootstrap-t 法Chap.IV 一个实例 Part.III 参数 bootstrap 方法Chap.I 一个实例 Part.I Intr…

Bootstrap的基本使用方法,5分钟帮你搞懂怎么用

原文地址&#xff1a; http://blog.csdn.net/codebycoder/article/details/51001256 作为Coder&#xff0c;我们都接触过Web design&#xff0c;如何快速的构建Web应用成了我们比较头疼的一个问题&#xff0c;不仅要考虑各种浏览器的兼容性&#xff0c;同时还要考虑各种手机的…

Bootstrap的基本使用方法介绍

作为Coder&#xff0c;我们都接触过Web design&#xff0c;如何快速的构建Web应用成了我们比较头疼的一个问题&#xff0c;不仅要考虑各种浏览器的兼容性&#xff0c;同时还要考虑各种手机的页面适配&#xff0c;毕竟现在已经到了互联网手机满天飞的时代了。 我有会听嵩哥的歌…

Django中引入bootstrap的方法

一、下载bootstrap 下载地址:https://v3.bootcss.com/getting-started/#download,选择第二个,下载带有源码的bootstrap,只能通过这种方式(django是封闭的) 下载的目录结构: dist文件是bootstrap的核心文件 二、创建一个简单Demo项目 1.在根项目下创建一个static目录,再在stat…

Bootstrap基本用法

Bootstrap Bootstrap是简洁、直观、强悍的前端开发框架&#xff0c;让web开发更迅速、简单。 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架&#xff0c;用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅…

BootStrap基本使用

目录 BootStrap框架 BootStrap特点 bootstrap的使用 布局容器 固定宽度 完整宽度 栅格网格系统 前言 列的形式 列组合和列偏移 列排序 列嵌套 排版 标题 段落 强调 对齐效果 列表 去点列表 内联列表 定义列表 代码 表格 表单标签 文本框和文本域 单…

统计学中的Bootstrap方法介绍及其应用

说明&#xff1a;本来这只是一篇学生时期对研究方向进行总结的文章&#xff0c;没想到能够给其他人带来了一些的帮助。两年多以来&#xff0c;有许多人留言及私信问我相关的问题&#xff0c;我也不止一次地改正文章中的一些纰漏。但限于时间久远以及水平有限&#xff0c;这篇文…

bootstrap的使用方法

Bootstrap 有趣的栅格网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统&#xff0c;随着屏幕 或视口&#xff08;viewport&#xff09;尺寸的增加&#xff0c;系统会自动分为最多 12 列。栅格系统用于通 过一系列的行&#xff08;row&#xff09;与列&#xf…

SetupFactory简单制作安装包流程

最近让我给项目做安装包&#xff0c;小白一个&#xff0c;开始找各种安装包打包工具。有的简单&#xff0c;但是功能差点意思&#xff0c;有的功能很强大&#xff0c;但是略复杂而且有的还收费。就发现SetupFactory&#xff08;安装工厂&#xff09;&#xff0c;这个工具还挺好…

setuptools的下载安装

setuptools的下载安装 *第一步&#xff0c;登录网址&#xff1a;https://pypi.org/project/setuptools/#files并下载压缩包。 第二步&#xff0c;将下载下来的压缩包解压到桌面。 第三步&#xff0c;按住shift键鼠标右键进入命令行窗口。 第四步&#xff0c;在命令行窗口输入…

使用setup

文章目录 setup函数返回值是一个对象setup函数返回值是一个渲染函数 setup是一个配置项&#xff0c;其值是一个函数。 组件用到的数据、方法等都放在setup这个配置项中。 setup函数的返回值&#xff0c;可以是一个对象&#xff0c;也可以是一个函数&#xff08;且是渲染函数&a…

初始setup

setup setup作为vue3里面的一个配置项&#xff0c;可以在里面写方法&#xff0c;变量&#xff0c;声明周期&#xff0c;计算属性等等 export default {name: setup,// setup作为vue3里面的一个配置项&#xff0c;可以在里面写方法&#xff0c;变量&#xff0c;声明周期&#…

Setup函数

Setup vue 3.0 setup是一个新的组件选项&#xff0c;作为组件中使用组合API的起点。 从组件生命周期来看&#xff0c;它的执行在组件实例创建之前vue2.x的beforeCreate执行。这就意味着在setup函数中this 还不是组件实例&#xff0c;this此时是undefined 在模版中需要使用的数…

setup factory使用方法(转)

推荐使用“Setup Factory ”&#xff0c;它是一个强大的安装程序制作工具。提供了安装制作向导界面&#xff0c;即使你对安装制作不了解&#xff0c;也可以生成专业性质的安装程序。可建立快捷方式&#xff0c;也可直接在Windows 系统的Register加入内容&#xff0c;还能在Win.…

安装包制作工具 SetupFactory 使用详解

Setup Factory是一个强大的安装程序制作工具。提供了安装制作向导界面&#xff0c;即使你对安装制作不了解&#xff0c;也可以生成专业性质的安装程序。可建立快捷方式&#xff0c;也可直接在 Windows 系统的注册表加入内容&#xff0c;还能在 Win.ini 和 System.ini 内加入设定…

1、setup

setup函数的两种返回值 1、若返回一个对象&#xff0c;则对象中的属性&#xff0c;放在&#xff0c;在模板中均可以直接使用&#xff08;重点关注&#xff09; <template><div class"setup"><div>姓名&#xff1a;{{name}}</div><div>…