1.认识Bootstrap

程序开发人员最可悲的一点，就是做出来的界面效果实在不怎么好看，在整个WEB项目（或App项目中），最麻烦的就在于界面的布局,组件的控制上,还需要考虑不同的浏览器.

利用BootStrap在编写任何页面的时候都会变得非常容易,只需要调用几个简单的CSS样式,就可以进行完美的界面显示

可以在https://v3.bootcss.com/getting-started/#download下载

所谓的生产环境实际上指的就是开发文件(*.css,*.js)比较小,也就是说所谓的压缩版本的程序代码.就是将一些无用的空格,注释都删除掉,

如果要想使用bootstrap,只需要将dist目录下的css,js,fonts文件夹拷贝到项目之中就可以了.此时工作环境就都准备完成了,那么随后需要做的就是进行代码的编写

●css:bootstrap.mian.css,所有的源代码都在"bootstrap.css"格式化进行了显示;

●js:bootstrap.main.js,所有的源代码都在"bootstrap.js"文件里面格式化显示了

但是有一点需要注意了,如果你只是拥有一个bootstrap那么还是无法开发,bootstrap是基于jQuery的建立的应用的,所以需要将jQuery的开发包进行配置

范例:定义bootstrap的基础模板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!---->
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>bootstrap</title>
		
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<!--//Bootstrap需要jquery的支持，所以一定要导入jquery开发包-->
		<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>

		<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css" />
		
	</head>
	<body>
		
	</body>
</html>

使用了Bootstrap之后,整个页面的开发就变得非常容易了.而且界面的显示只需要操作几个css样式就可以完成了.

Bootstrap从3.x开始支持移动设备,可以利用如下语句设置设备大小:

<meta name="viewport" content="width=device-width,initial-scale=1">

猜你喜欢