Bootstrap框架使用

最新推荐文章于 2024-01-08 10:00:00 发布

CSYfairy

最新推荐文章于 2024-01-08 10:00:00 发布

阅读量208

点赞数

分类专栏： Bootstrap

原文链接：https://www.cnblogs.com/qq752059037/p/9838996.html

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Bootstrap框架的基本使用
Bootstrap是什么
简介

就是已经写好的一个html和css的样式组合

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

它是为实现快速开发Web应用程序而设计的一套前端工具包。

它支持响应式布局，并且在V3版本之后坚持移动设备优先。

优势

在Bootstrap出现之前：

命名：重复、复杂、无意义（想个名字费劲）

样式：重复、冗余、不规范、不和谐

页面：错乱、不规范、不和谐

在使用Bootstrap之后：各种命名都统一并且规范化。页面风格统一，画面和谐。
初次使用

下载 : http://www.bootcss.com/

我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap

官方文档 : https://v3.bootcss.com/

官方文档里边有详细的使用方法

引用:

通过网络引用:

具体网址可以在官方文档里查看

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

本地引用

具体路径视情况而定

<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">

目录结构

处理依赖:

由于Bootstrap的某些组件依赖于jQuery，所以需要下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。

链接:https://www.cnblogs.com/qq752059037/p/9838996.html
Bootstrap官网：https://v3.bootcss.com/javascript/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CSYfairy

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Bootstrap框架基本使用

深耕java的博客

02-02

515

Bootstrap 1.概念：一个前端开发的框架，Bootstrap来自Twitter，目前受欢迎的前端框架，是基于HTML, CSS, JavaScript，它简单灵活，是的web开发更加快捷框架：一个半成品软件，开发人员可以在框架基础上，进行二次开发，简化编码好处： 1.定义了很多的css样式和js插件。我们开发人员可以使用这些样式和插件得到丰富的页面效果 2.响应式布局同一套页面可以兼容不同分辨率的设备 2.Bo

Bootstrap里的文件作用

11-29

733

Bootstrap里的文件分别表示什么？都有什么用？ bootstrap.css bootstrap.min.css bootstrap-responsive.css bootstrap-responsive.min.css bootstrap.js bootstrap.min.js 回答：bootstrap.css 是完整的bootstrap样式表，未经...

参与评论您还未登录，请先登录后发表或查看评论

Bootstrap简述

weixin_71437031的博客

08-18

2888

栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-、.col-sm-、.col-md-、.co-/g-和.col-xl*类名。组件可以有自己的属性和方法。由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。栅格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器)尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。...

Bootstrap入门

橘猫吃不胖的博客

01-14

2155

Bootstrap入门1 Bootstrap概述1.1 什么是Bootstrap1.2 Bootstrap的特点1.3 Bootstrap框架的组成2 Bootstrap环境配置2.1 Bootstrap下载2.2 使用时需要导入的文件2.3 文件的引用3 全局CSS样式3.1 布局容器3.2 标题3.3 页面主体3.4 内联文本元素3.5 文本对齐3.6 改变大小写3.7 列表3.8 表格 1 Bootstrap概述 1.1 什么是Bootstrap Bootstrap是一个基于HTML、CSS和Java

什么是bootstrap?

2302_76180472的博客

09-13

187

Bootstrap是一个开源的基于HTML、CSS、JavaScript的简洁、直观、强悍的前端开发框架，它是为实现快速开发Web应用程序而设计的一套前端工具包1。它是一种设计成通过自己的操作使其自身处于期望状态的技术或设备，例如，一种机器例程，该例程的头几个指令足以使引导其自身的其余部分从输入设备进入计算机2。下载Bootstrap  在官网下载压缩包,选择下载生产环境的压缩包,将其解压到项目目录下,但是不能覆盖你自己建的文件夹。创建文件夹按照以往的习惯创建文件夹。bootstrap怎么用。

Web前端基础：Bootstrap框架.pptx

05-06

【Bootstrap框架】是Web前端开发中的一个重要工具，它是由Twitter推出的开源框架，旨在提供一套简洁、灵活且响应式的UI（用户界面）组件和交互设计。Bootstrap基于HTML、CSS和JavaScript，能够快速构建出美观且适应...

使用Bootstrap框架制作查询页面的界面实例代码

09-02

主要介绍了使用Bootstrap框架制作查询页面界面的效果，本文以职业技能考证分数查询界面为例，通过实例代码给大家详细介绍,需要的朋友可以参考下

一份Bootstrap框架的期末作业

06-17

Bootstrap框架是目前最流行、最易用的前端开发框架之一，它由Twitter开发并开源，旨在简化网页设计和响应式布局的实现。这份"一份Bootstrap框架的期末作业"集合，显然是一个学习和实践Bootstrap的资源包，包含了作者...

Bootstrap框架安装使用详解

08-31

Bootstrap框架是一款广泛应用于Web开发的前端框架，它提供了一套响应式、移动设备优先的流式栅格系统，以及丰富的预定义样式、组件和JavaScript插件，极大地...希望本文的介绍能帮助你更好地理解和使用Bootstrap框架。

如何使用bootstrap框架 bootstrap入门必看!

08-30

【Bootstrap框架介绍】 Bootstrap是一款流行的前端开发框架，它由Twitter公司开发并开源，旨在提供一套易于使用、响应式和移动设备优先的Web设计工具。Bootstrap通过预定义的CSS、JavaScript组件和HTML模板，帮助...

科普帖：什么是Bootstrap？Bootstrap开发框架入门

热门推荐

Miracle.Zhao的博客

02-25

3万+

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。在现代 Web 开发中，有几个几乎所有的 Web 项目中都需要的组件。 Bootstrap 为您提供了所有这些基本的模块 - Grid、Typography、Tables、Forms、Buttons 和 Responsiveness。此外，还有大量其他有用的前端组件，比如 Dropdowns、Navigation、...

Bootstrap简介

归兮的博客

08-18

9194

bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap 4 概览_Bootstrap中文网什么是组件组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。...

Bootstrap——优秀的开源前端框架

weixin_34357436的博客

02-23

1381

声明：本文已经首发于InfoQ中文站，版权所有，原文为《优秀的开源前端框架Bootstrap发布2.0.1版》，如需转载，请务必附带本声明，谢谢。 Bootstrap是著名的社交网站、微博的先驱Twitter在2011年8月推出的开源WEB前端框架，集合CSS和HTML，使用了最新的浏览器技术，为快速WEB开发提供了一套前端工具包，包括布局、网格、表格、按钮、表单、导航、提示等等。使用Boot...

【web框架】Bootstrap框架使用

weixin_46013570的博客

03-11

3100

这里写目录标题一、Bootstrap简介二、Bootstrap使用1.创建文件夹2.创建html骨架3.引入相关样式4.书写内容一、Bootstrap简介 Bootstrap来自推特，基于HTML、CSS和JavaScript，简洁灵活，使得web开发更加便捷。官网： Bootstrap中文网官网下载链接：当前版本： v3.4.1 解压后文件夹中有以下三个文件👇 二、Bootstrap使用 1.创建文件夹点击上文下载链接，下载bootstrap并解压；在项目中新建一个名为bootstra

Bootstrap框架的快速使用

lflcodeplus的博客

02-24

4739

Bootstrap框架使用Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。1 下载Bootstrap2 在项目中导入上面解压的三个文件夹【复制到项目中】3 创建HTML文件，引入资源文件4 Bootstrap框架使用 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 1 下载Bootstrap 前往bootstrap框架的官方文档处下载bootstrap官网点进去后

bootstrap是什么？

sinat_41920065的博客

07-10

5359

BootStrap是一个移动设备优先的UI框架。我们可以不用写任何css,js代码就能实现比较漂亮的有交互性的页面。我们程序员对页面的编写是有硬伤的，所有要自己写页面的话就要使用类似于bootstrap这样的UI框架。平时用得很多的： 1、模态框 2、表单，表单项 3、布局 4、删格系统 ...

媒体查询，bootstrap。

gako15587481707的博客

05-19

674

1媒体查询学习媒体查询的目的：了解如何使用媒体查询做响应式页面。为接下来学的 Bootstrap 做铺垫。媒体查询会写如下代码即可： body { background-color: gray; } /* 大于等于768px 为粉色 */ @media (min-width: 768px) { body { background-color: pink; } } /* 大于等于992px 为蓝色 */ @media (min-...

不使用bootstrap框架使用模态框

04-27

要在不使用 Bootstrap 框架的情况下使用模态框，可以使用原生的 HTML、CSS 和 JavaScript 来实现。首先，在 HTML 文件中创建一个 div 元素，作为模态框的容器，并设置其样式为隐藏： ``` <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>Some text in the Modal..</p> </div> </div> ``` 然后，使用 CSS 样式来设置模态框的样式。例如： ``` .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } ``` 在 JavaScript 文件中，实现打开和关闭模态框的功能。例如： ``` // 获取模态框和关闭按钮 var modal = document.getElementById("myModal"); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("close")[0]; // 点击按钮打开模态框 btn.onclick = function() { modal.style.display = "block"; } // 点击关闭按钮或其他地方关闭模态框 span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } ``` 这样就可以在不使用 Bootstrap 框架的情况下实现模态框的功能了。