bootstrap（一）环境搭建和基本介绍

最新推荐文章于 2024-04-18 15:19:36 发布

铁面无情哈士奇

最新推荐文章于 2024-04-18 15:19:36 发布

阅读量376

点赞数

分类专栏：前端练习文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_36688622/article/details/80509727

版权

前端练习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

很早之前就想开始前端的东西，直到这个项目开始才真正上手接触前端。之前知道很多的前端框架，angularjs、vuejs等等，感觉很飘，因为之前做过PPT，所以对前端设计或是UI很感兴趣，（个人认为对没还是有一定的见解的）。废话少说，开始正题。

环境安装：说实话，bootstrap对环境没什么要求，这里的环境指的是前端的目录架构。首先去bootstrap的下载页https://v3.bootcss.com/getting-started/#download 可以看到有三个下载选项，点第一个下载，把下载好的文件解压，重命名成自己喜欢的名字，放到一个找得到的位置，然后用sublime打开。可以看到有三个文件夹：js、css、font，分别对应bootstrap的js（官方文档说需要jQuery的库），css样式和字体（包括字体图标）。
基本介绍，bootstrap的简介blablabla一大堆，就不过多介绍了，主要是其中的grid系统对我启发很大，之前做的很多页面（其实全部都是改界面）总是会出现排版不齐的问题，网格是一个很机智措施，把所有元素都模块化，一个个积木一样拼进去。

关于引用。很显然，当我们想做一个基于bootstrap的前端，那就必须要使用bootstrap的css和js。bootstrap的js默认是要自行下载jQuery的库（可以自行寻找），我们在引用的时候，需要调用bootstrap.min.js和bootstrap.min.css，另外，需要引用jquery-*.*.*.min.js的库，实例代码如下（蓝色部分为应用部分，包括但不限于这些）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
	<form class="form-inline">
		<div class="form-group has-success">
			<label class="control-label">这是一个输入框：</label>
			<input type="text" class="form-control input-sm" name="" placeholder="这是一个输入框">
		</div>
		<div class="form-group has-warning">
			<label class="control-label">这是一个选择框：</label>
			<select class="form-control">
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
			</select>
		</div>
		<div class="form-group has-error">
			<label class="control-label">这是一个输入框：</label>
			<input type="text" class="form-control" name="">
		</div>
		<div class="form-group has-danger">
			<label class="control-label">这是一个输入框：</label>
			<textarea class="form-control"></textarea>
		</div>
	</form>
</body>
</html><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
	<form class="form-inline">
		<div class="form-group has-success">
			<label class="control-label">这是一个输入框：</label>
			<input type="text" class="form-control input-sm" name="" placeholder="这是一个输入框">
		</div>
		<div class="form-group has-warning">
			<label class="control-label">这是一个选择框：</label>
			<select class="form-control">
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
			</select>
		</div>
		<div class="form-group has-error">
			<label class="control-label">这是一个输入框：</label>
			<input type="text" class="form-control" name="">
		</div>
		<div class="form-group has-danger">
			<label class="control-label">这是一个输入框：</label>
			<textarea class="form-control"></textarea>
		</div>
	</form>
</body>
</html>

基本的环境搭建和介绍就这些，其余的增删改查吧。

铁面无情哈士奇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap（一）环境搭建和基本介绍

很早之前就想开始前端的东西，直到这个项目开始才真正上手接触前端。之前知道很多的前端框架，angularjs、vuejs等等，感觉很飘，因为之前做过PPT，所以对前端设计或是UI很感兴趣，（个人认为对没还是有一定的见解的）。废话少说，开始正题。环境安装：说实话，bootstrap对环境没什么要求，这里的环境指的是前端的目录架构。首先去bootstrap的下载页https://v3.bootcss.c...
复制链接

扫一扫