Bootstrap安装使用

最新推荐文章于 2024-08-26 20:11:46 发布
最新推荐文章于 2024-08-26 20:11:46 发布
阅读量970 收藏 6
点赞数
文章标签： bootstrap css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duan_yuer/article/details/118118245
版权

这里写自定义目录标题

Bootstrap的安装引入

Bootstrap的安装

通过链接：https://www.bootcss.com/进行下载安装。
Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
可根据需求自行选择。

文件结构

预编译的 Bootstrap

当下载 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：
在这里插入图片描述

Bootstrap 源代码

如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：
在这里插入图片描述
less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

Bootstrap的引用

将所下载的文件中css、js、fonts文件复制到自己的项目里。在对其引用

		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<!--导入自己的js文件-->
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/bootstrap-theme.css" />
		<!--导入自己的css文件-->

1、必须先引入bootstrap的支持 ，包括js、css、font文件。
2、引入的文件必须先有jQuery的核心文件，再引入bootstrap的js文件，再引入自己的文件。
3、css文件必须先引入bootstrap的css文件再引入自己的文件
4、font文件无需在页面上引入，但是需要在项目的目录中存在

Bootstrap的使用

Bootstrap 网格系统

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
当一行中列没有占满，多余的位置会空下来。

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/bootstrap-theme.css" />
		<style>
			div{
			background-color:greenyellow;
			border: solid royalblue 1px;
			}
		</style>
	</head>

<body>
		<div class="container">
			<div class="row">
				<div class="col-lg-6">列1</div>
				<div class="col-lg-6">列2</div>
			</div>
			<div class="row">
				<div class="col-lg-4">列1</div>
				<div class="col-lg-4">列2</div>
				<div class="col-lg-4">列3</div>
			</div>
			<div class="row">
				<div class="col-lg-2">列1</div>
				<div class="col-lg-2">列2</div>
				<div class="col-lg-2">列3</div>
				<div class="col-lg-2">列4</div>
				<div class="col-lg-2">列5</div>
				<div class="col-lg-2">列6</div>
			</div>
		</div>
	</body>

运行效果：
在这里插入图片描述
1.行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
2.使用行来创建列的水平组。
3.内容应该放置在列内，且唯有列可以是行的直接子元素。
4.预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

offset偏移效果

			<div class="row">
				<div class="col-lg-4 col-md-offset-1">列1</div>
				<div class="col-lg-4">列2</div>
			
			</div>

运行效果：
在这里插入图片描述

Bootstrap 表单

垂直或基本表单

1.向父 元素添加 role=“form”。
在这里插入图片描述
2.把标签和控件放在一个带有 class .form-group 的

中。
在这里插入图片描述
3.向所有的文本元素 、 和 添加 class .form-control。
在这里插入图片描述
代码： 

	<form role="form" >
			<div class="form-group">
				<label for="name">用户名</label>
				<input class="form-control" name="name" />
			</div>
			<div class="form-group">
				<label for="name">密码</label>
				<input class="form-control" type="password" name="name" />
			</div>
		</form>

默认为垂直效果：
在这里插入图片描述

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 标签添加 class .form-inline。

			<form role="form" class="form-inline">
			<div class="form-group">
				<label for="name">用户名</label>
				<input class="form-control" name="name" />
			</div>
			<div class="form-group">
				<label for="name">密码</label>
				<input class="form-control" type="password" name="name" />
			</div>
		</form>

在这里插入图片描述

水平表单

1.向父 元素添加 class .form-horizontal。
2.把标签和控件放在一个带有 class .form-group 的

中。
3.向标签添加 class .control-label。
结合网格效果：
在这里插入图片描述
运行效果：
在这里插入图片描述

Bootstrap 导航栏

1.向nav标签添加 class .navbar、.navbar-default。（向上面的元素添加 role=“navigation”，有助于增加可访问性。）

			<nav class="nav navbar-default" role="navigation" >

2.向 div元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 a 元素。这会让文本看起来更大一号。

				<div class="navbar-header">
					<a href="#" class="navbar-brand">笔记本电脑</a>
				</div>

3.为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

<ul class="nav navbar-nav">

完整代码：

		<div class="container">
			<nav class="nav navbar-default" role="navigation">
				<div class="navbar-header">
					<a href="#" class="navbar-brand">笔记本电脑</a>
				</div>
				<div>
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">神舟</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" >联想<b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">小新</a></li>
								<li><a href="#">拯救者</a></li>
							</ul>
						</li>
						<li><a href="#">惠普</a></li>
					</ul>
				</div>
			</nav>		
		</div>

运行效果：
在这里插入图片描述

Bootstrap 分页组件

默认分页

		<div class="container">
			<ul class="pagination">
				<li class="disabled"><a href="">上一页</a></li>
				<li class="active"><a href="">1</a></li>
				<li><a href="">2</a></li>
				<li><a href="">3</a></li>
				<li><a href="">4</a></li>
				<li><a href="">下一页</a></li>
			</ul><br />
			</div>

运行效果：在这里插入图片描述
通过disabled与active，当位于第一页的时候上一页无法点击。
在这里插入图片描述

不同分页之间的大小

			<ul class="pagination">//默认大小
			<ul class="pagination pagination-sm">//小
			<ul class="pagination pagination-lg">//大

运行效果：
在这里插入图片描述

翻页

如果您想要创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一样，翻页也是无序列表。默认情况下，链接是居中显示。

			<ul class="pager">
				<li class="previous"><a href="">Previous</a></li>
				<li class="active"><a href="">1</a></li>
				<li><a href="">2</a></li>
				<li><a href="">3</a></li>
				<li><a href="">4</a></li>
				<li class="next"><a href="">next</a></li>
			</ul>

运行效果
在这里插入图片描述

Bootstrap 字体图标

		<div class="container">
			<span class="glyphicon glyphicon-search"></span> search
			<span class="glyphicon glyphicon-home"></span> home
			<span class="glyphicon glyphicon-file"></span> file
			<span class="glyphicon glyphicon-film"></span> film
			<span class="glyphicon glyphicon-trash"></span> trash
			<button type="button" class="btn btn-danger">
				<span class="glyphicon glyphicon-plus"></span> plus
 			</button>
			
			<button type="button" class="btn btn-danger">
				<span class="glyphicon glyphicon-user"></span> 用户
			</button>
		</div>

运行效果：
在这里插入图片描述

幽游白酥
关注
Bootstrap 环境安装
csbysj2020
06-07 435
Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动设备优先的网站。在开始使用 Bootstrap 之前，您需要安装相应的环境。本文将指导您如何安装 Bootstrap 环境。
Bootstrap安装环境配置教程分享
09-02
在本教程中，我们将详细讲解如何配置和安装Bootstrap环境。 首先，安装Bootstrap非常简单。你可以直接从官方网站[http://getbootstrap.com/](http://getbootstrap.com/)获取最新版本。网站上有两个下载选项： 1. *...
在乐字节学习的一天（在线更新）
m0_51071144的博客
10-20 142
在乐字节学习的第4天，学习了挺多知识，下面就是我今天在乐字节学习的知识。 BootStrap的安装和使用 BootStrap 介绍 ​ 官网：http://getbootstrap.com/ ​ 中文网：http://www.bootcss.com/ ​ Bootstrap 是一套现成的 CSS 样式集合（做得还是很友好的）。是两个推特的员工干出来的。 ​ Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 ​ 2011年，twitter
Bootstrap5安装
最新发布
听海边涛声
08-26 347
Bootstrap5安装
响应式开发(三)-----Bootstrap框架的安装使用
直到世界的尽头
01-14 3090
下载 Bootstrap可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。Download Source：下载源代码。点击该按钮，您可以直接从 from 上得
Bootstrap学习笔记——安装使用
ZeroOber的博客
09-14 490
Bootstrap安装使用 接触到bootstrap有一段时间了，只是用的比较少，不怎么熟悉，现在从新学习、熟悉bootstrap，写个笔记以后方便查阅。 Boostrap的安装使用： 登录官网http://getbootstrap.com/下载Bootstrap --> 引入 Bootstrap --> link href="https://maxcdn.bootstr
Bootstrap的安装和使用
热门推荐
Mr.Write的博客
05-10 5万+
Bootstrap的安装和使用一. Bootstrap简介Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简单，粗暴。具体Bootstrap的学习教程可参考菜鸟教程二.
Bootstrap框架安装使用详解
08-31
本文将详细介绍Bootstrap的安装和使用方法。 ### 1. Bootstrap框架安装 #### 下载Bootstrap Bootstrap的官方下载地址是[http://getbootstrap.com/](http://getbootstrap.com/)。在这里，你可以选择下载预编译的...
Bootstrap——安装
NanChen的博客
09-02 864
bootstrap安装方法，只要到官网http://getbootstrap.com/ 点击Download 进入下载页面后点击 下载压缩包即可 下载完毕后打开可以吧css文件夹中把bootstrap.min.css文件直接粘贴到你所需要用到bootstrap的文件夹中然后用link引入即可 ...
Bootstrap—— bootstrap的安装
qq_43201350的博客
01-09 353
Bootstrap—— bootstrap的安装
bootstrap安装配置
奋斗的日子最甜美，在科技的海洋里，永无止境。
04-03 8960
bootstrap安装配置 下载Bootstrap 打开官方网站http://getbootstrap.com/，点击Download Bootstrap。 1) 下载用于生产环境的文件 2) 下载用于编译css的Less源码及插件的js源文件 3) 下载用于编译css的Lass源码及
bootstrap安装环境，入门教程
02-21
bootstrap安装环境，bootstrap入门教程,有实例
Stata实现中介效应 bootstrap，ado文件下载放在stata的ado/base/s 下可以实现bootstrap自由
03-01
Stata实现中介效应 bootstrap，ado文件下载放在stata的ado/base/s 下可以实现bootstrap自由
前端框架---Bootstrap的使用
m0_74249162的博客
04-30 2883
Bootstrap是一个来自Twitter的前端开发框架，它基于HTML、CSS和JavaScript，以其简洁灵活的特性使得Web开发更加快捷。基本结构网格系统：Bootstrap使用12列网格布局，可以快速构建响应式布局。通过添加class到HTML元素上，可以指定元素在不同屏幕宽度下的列数和偏移量。CSS样式：Bootstrap包含了大量的预设CSS样式，如排版、颜色、按钮、表单等，可以快速地为网页添加统一的样式。JavaScript插件。
Bootstrap的安装(保姆式教程)
weixin_73200795的博客
07-23 1539
开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行。）的Breaking News都使用了该项目。一、首先在浏览器搜索bootstrap，然后点击。然后点击 Bootstrap v3。Bootstrap是美国。，包括NASA的MS。然后点击这个生产环境。
bootstrap的安装
12-05 1847
再vue中用npm安装1)、使用指令 2)、安装成功后，能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容: 至此bootStrap也引入结束，接下来我们的重点来了，因为BootStrap与VUE有一个专门的设计叫做bootstrap-vue.js，所以我们引入它之后就可以直接使用它们提供的专有样式，比原生的bootStrap要好看很多3)、使用指令:4)、在main.js文件中添加:
Bootstrap安装的过程
旺仔Sec&blog
04-26 1108
Bootstrap是一种流行的前端框架，用于快速开发响应式和移动设备优先的网站和Web应用程序。它由Twitter开发，并在2011年开源发布。Bootstrap提供了一组预定义的CSS样式和JavaScript插件，包括网格系统、按钮、表单、导航栏等，使开发者能够轻松地创建现代化和美观的界面。**
史上最全bootstrap下载安装使用教程（下载--＞安装--＞使用）
m0_59285890的博客
05-30 1万+
bootstrap下载安装使用教程（下载-->安装-->使用）
20160707 Bootstrap下载与安装（配图）
Hey_Sarah
07-07 2946
1.在Node.js官网下载Node.js 2.安装Node.js  3.使用npm工具安装Bootstrap
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、付费专栏及课程。

余额充值