Bootstrap前段框架(一篇到底)

这篇具有很好参考价值的文章主要介绍了Bootstrap前段框架(一篇到底)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、Bootstrap简介

1. WWW

1.1 What?

  1. 诞生于2011年,来自Twitter公司,是目前最受欢迎的前端框架
  2. 是一个用于快速开发Web应用程序和网站的前端框架
  3. Bootstrap是基于HTML、CSS、JS的,简洁灵活,使得Web开发更加快捷

概述:Bootstrap是一个建立一个页面,就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架

1.2 Why ?

  1. 响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机)
  2. 移动设备优先
  3. 浏览器支持
  4. 容易上手

1.3 Where ?

  1. 企业网站、博客、后台、分类简单的电商之类的网站

注意: 不适用于过于复杂的电商网站

2. 环境安装

下载Bootstrap库 :点击进入

  1. 进入网址点击下载Bootstrap
    bootstrap框架,bootstrap,前端,html,前端框架,jquery

  2. 三个均可下载,使用下载生产文件和源码
    bootstrap框架,bootstrap,前端,html,前端框架,jquery
    如:bootstrap框架,bootstrap,前端,html,前端框架,jquery

  3. 解压后打开dist文件夹
    bootstrap框架,bootstrap,前端,html,前端框架,jquery

  4. 导入js文件
    bootstrap框架,bootstrap,前端,html,前端框架,jquery
    1-后缀.js为开发版本(需要改源代码用)
    2-后缀为 .min.js为生产版本

  5. 导入css文件
    bootstrap框架,bootstrap,前端,html,前端框架,jquery

2.1 页面引入库

添加到body标签结束之前

  • bootstrap.css:Bootstrap核心样式【添加到head标签中】
  • jquery-3.3.1.js:jQuery库【注意:必须在Bootstrap核心库引入之前引入jQuery库】
  • bootstrap.js:Bootstrap核心库
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入CSS之前 要先引入JQuery -->
		<!-- 引入Bootstrap CSS -->
		<link rel="stylesheet" href="css/bootstrap.css">
	</head>
	<body>
		
		<!-- 注意:Bootstrap要引入body标签结束之前 -->
		<script src="js/myjs.js"></script>
		<!-- 引入Bootstrap类库 -->
		<script src="js/bootstrap.js"></script>
	</body>
</html>

为什么CSS要放在前面 ?

因为代码是从上往下执行的,CSS代表这整个页面的样式,应等页面加载后就立即执行;

3. Bootstrap基本使用

3.1 布局容器

bootstrap框架,bootstrap,前端,html,前端框架,jquery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css">
	</head>
	<body class="container">
		<button type="button" class="btn btn-outline-primary">按钮</button>
		<hr color="blue" >
		
		<script src="js/myjs.js"></script>
		<script src="js/bootstrap.js"></script>
	</body>
</html>

如演示:
通过Bootstrap实现的按钮演示以及固定容器会随着容器大小自动缩小和扩大

bootstrap框架,bootstrap,前端,html,前端框架,jquery

3.2 Bootstrap在手机浏览器展示

bootstrap框架,bootstrap,前端,html,前端框架,jquery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 写入此代码-->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<!-- 引入CSS之前 要先引入JQuery -->
		<!-- 引入Bootstrap CSS -->
		<link rel="stylesheet" href="css/bootstrap.css">
	</head>
	<body class="container">
	<button type="button" class="btn btn-outline-primary">按钮</button>
		<hr color="blue" >
		<script src="js/myjs.js"></script>
		<script src="js/bootstrap.js"></script>
	</body>
</html>

bootstrap框架,bootstrap,前端,html,前端框架,jquery

Bootstrap实现导航栏和轮播图

第一步 : 进入Bootstrap文档 网站选择自己需要的样式直接开 C
bootstrap框架,bootstrap,前端,html,前端框架,jquery
注意:网站自带效果图,这里就不展示了。

3.3 栅格系统

概念: Bootstrap提供了一套响应式、移动设备优先的流式网格系统
特点: 会随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列
网格系统策略图:
bootstrap框架,bootstrap,前端,html,前端框架,jquery
栅格系统的组成 :
由 行(.row)合单元格(.col)组成 ;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引入Bootstrap CSS -->
		<link rel="stylesheet" href="css/bootstrap.css">
	</head>
	<body>
		<div class="container">
			<!-- mt == margin-top -->
			<div class="row mt-1">
				<!-- 总12格  col-1代表一格 -->
				<div class="col-2" style="border: 1px solid greenyellow;">123</div>
				<div class="col-2" style="border: 1px solid greenyellow;">123</div>
				<div class="col-2" style="border: 1px solid greenyellow;">123</div>
				<div class="col-2" style="border: 1px solid greenyellow;">123</div>
				<div class="col-2" style="border: 1px solid greenyellow;">123</div>
				<div class="col-2" style="border: 1px solid greenyellow;">123</div>
			</div>
		</div>
		<script src="js/myjs.js"></script>
		<!-- 引入Bootstrap类库 -->
		<script src="js/bootstrap.js"></script>
	</body>
</html>

bootstrap框架,bootstrap,前端,html,前端框架,jquery
最后 :了解如何使用就可以直接去网站查找自己想要的网页组件咯,这里就不一一试例了。加油!让学习成为一种习惯;文章来源地址https://www.toymoban.com/news/detail-843800.html

到了这里,关于Bootstrap前段框架(一篇到底)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://blog.csdn.net/Justw320/article/details/129851640

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 用前端框架Bootstrap和Django实现用户注册页面

    命令如下: 执行下面条命令依次创建需要的应用: 名叫users的应用创建好后,还需要在全局配置文件中对应在用进行注册,具体方法如下: 打开““E:Python_projectP_001myshop-testmall_backendmall_backendsettings.py””文件,找到名叫“INSTALLED_APPS”的列表(list),在其中加入应用名,

    2024年02月06日
    浏览(14)
  • 学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面

    ✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 所属的专栏: 前端泛海 景天的主页: 景天科技苑 Bootstrap官网 一、什么是Bootstrap? bootstrap是一个基于HTML、CSS和Javascript语言编写的框架,具有简单、灵活的特性,拥有样式库、组件和插件,bootstrap常

    2024年03月11日
    浏览(13)
  • 用前端框架Bootstrap的AdminLTE模板和Django实现后台首页的页面

    承接博文 用前端框架Bootstrap和Django实现用户注册页面 继续开发实现 后台首页的页面。 以下需要的四个文件夹及里面的文件百度网盘下载链接: https://pan.baidu.com/s/1QYpjOfSBJPmjmVuFZdSgFQ?pwd=o9ta 下载 AdminLTE-3.1.0-rc 并解压缩 把文件夹 other 和 pages 复制到 “E:Python_projectP_001myshop-t

    2024年02月06日
    浏览(9)
  • 一篇随笔会用Bootstrap

    Bootstrap是美国Twitter公司的设计师 Mark Otto 和 Jacob Thornton 合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目

    2024年02月11日
    浏览(8)
  • 【Bootstrap 学习笔记】Bootstrap 提供相应插件在HTML页面中实现动态交互效果

    Bootstrap 提供相应插件在 HTML 页面中实现动态交互效果。 1)前提条件 由于 Bootstrap 提供的插件都是依赖于 jQuery 的,所以必须要先引入 jQuery 文件。 Bootstrap 的每个插件都对应具有一个 JavaScript 文件,允许单独引入到 HTML 页面。也提供了一个完整版本(Bootstrap.js 或 Bootstrap.min

    2024年02月13日
    浏览(19)
  • Flask 框架集成Bootstrap

    前面学习了 Flask 框架的基本用法,以及模板引擎 Jinja2,按理说可以开始自己的 Web 之旅了,不过在启程之前,还有个重要的武器需要了解一下,就是著名的 Bootstrap 框架和 Flask 的结合,这将大大提高开发 Web 应用的效率。 Bootstrap 是 Twitter 公司的设计师 Mark Otto 和 Jacob Thornto

    2024年02月13日
    浏览(7)
  • Bootstrap 框架详解

    框架顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。而插件一般是为了解决某个问题专门存在的,其功能单一,并且比较小。 前端常用的框架有 Bootstrap、Vue、Angu

    2024年02月05日
    浏览(10)
  • Bootstrap框架(JavaScript组件)

    2024年02月14日
    浏览(5)
  • 基于Bootstrap的登录&注册模板(html+css)

    基于Bootstrap的登录注册模板(html+css),适合django等框架,可直接修改对接后端 登录、注册、输入信息错误提醒、记住密码、自动登录等等 GitHub:基于Bootstrap的登录注册模板【下载麻烦客官点颗Star】 CSDN资源:基于Bootstrap的登录注册模板(html+css)

    2024年02月12日
    浏览(10)
  • Web开发之常用框架BootStrap

    bootstrap是基于HTML、CSS、JS的前端框架,该框架预定了一套CSS样式和与样式相对应的JS代码,开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以实现指定的效果展示。BootStrap使得web开发更加高效,并且支持响应式开发,解决了移动互联网前端开发问题。所谓的响

    2024年02月08日
    浏览(13)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包