学习日记01

最新推荐文章于 2024-10-07 09:24:46 发布

20232810肖峰

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量103

点赞数 1

文章标签： html5 javascript css

本文链接：https://blog.csdn.net/weixin_46081558/article/details/118852068

版权

学习目标：

学习Bootstrap基础知识；

学会用HTML、JavaScript、CSS + Bootstrap构建网页。

学习内容：

1、什么是Bootstrap

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。

2、如何引入Bootstrap

$(img-fgQWEpxD-1626485375415)(C:\Users\11965\AppData\Roaming\Typora\typora-user-images\image-20210717091850215.png)]$

如图所示引入对应的CDN标签即可全局使用Bootstrap

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

3、Bootstrap的具体例子

带图标的输入框
在这里插入图片描述

<div style="padding: 100px 100px 10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="input-group">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="twitterhandle">
		</div>
		<br>
		<div class="input-group">
			<input type="text" class="form-control">
			<span class="input-group-addon">.00</span>
		</div>
		<br>
		<div class="input-group">
			<span class="input-group-addon">$</span>
			<input type="text" class="form-control">
			<span class="input-group-addon">.00</span>
		</div>
	</form>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 $(img-i8wGgwaF-1626485375419)(C:\Users\11965\AppData\Roaming\Typora\typora-user-images\image-20210717092424925.png)]$

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮工具栏</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-toolbar" role="toolbar">
	<div class="btn-group">
		<button type="button" class="btn btn-default">按钮 1</button>
		<button type="button" class="btn btn-default">按钮 2</button>
		<button type="button" class="btn btn-default">按钮 3</button>
	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-default">按钮 4</button>
		<button type="button" class="btn btn-default">按钮 5</button>
		<button type="button" class="btn btn-default">按钮 6</button>
	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-default">按钮 7</button>
		<button type="button" class="btn btn-default">按钮 8</button>
		<button type="button" class="btn btn-default">按钮 9</button>
	</div>
</div>

</body>
</html>