Bootstrap的简单学习

最新推荐文章于 2024-04-23 21:43:06 发布

原创最新推荐文章于 2024-04-23 21:43:06 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

笔记专栏收录该内容

44 篇文章

订阅专栏

本文介绍了Bootstrap前端框架的概念及优势，如内置丰富的CSS样式和插件、支持响应式布局等。通过栅格系统，开发者能轻松创建兼容多种设备的网页布局。

当我们把前端三剑客HTML,css,JavaScript的基础知识都学习完的时候,我们发现,应用这些基础知识还是很难做出一个美观的页面的,代码量会非常大,甚至我们根本不知道怎么去美化HTML页面,无从下手.
于是,前端web框架就需要我们去学习了,像学习后端SSM等框架一样,这次我们学习的前端web框架是BootStrap.

Bootstrap:

概念:他是一个前端开发的框架,Bootstrap,来自Twitter,他基于前端三剑客,灵活简洁,使得前端web开发更加便捷
好处:

1.定义了很多CSS的样式和插件,可以直接使用他们
2.响应式布局:
		同一套页面可以兼容不同分辨率的设备
		实现:依赖于格栅系统:将一行平均成12个格子,可以指定元素占有几个格子
		步骤:
			1.定义容器:
				container:   页面两边会留有空白
				container-fluid		每一种设备都是100%宽度
			2.定义占几行:
				相当于之前的tr   样式:row
			3.定义元素:指定该元素在不同的设备上,所占的格子数目
				样式:col-设备代号-格子数目
		栅格系统:
				一行中如果格子数目超过12,,会自动换行的
				栅格系统的数字格子会向上兼容,栅格适用于屏幕宽度大于或等于
				分界点大小的设备,但是不向下兼容
				如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素占满一整行

这里面的设备代号包括:xs<sm<md<lg:手机<平板<笔记本<大屏幕
栅格系统则是把页面的没一行都分成12分,我们可以指定某个元素(大部分情况下使用div)占用多少个栅格,同时我们可以在里面嵌套行,用以实现复杂的表格布局,例如某一个元素占用两行两列.

Bootstrap帮助文档

如何使用:

	1.下载Bootstrap
	2.在项目中将这三个文件夹复制进去
				文件中min版文件是没有制表符换行符号的体积比较小,在引入的时候推荐使用
				但是在阅读源码的时候,就要读没有min版的文件,
	3.创建HTML页面,引入必要的资源文件
				https://cdn.bootcss

CSS样式和JS插件

	全局CSS样式:
		按钮 :  class = "btn btn-default"
		图片	 :
				class = "img-responsive":图片在任意尺寸都占100%
				图片形状:
					class= "img-rounded"  方形图片
					class="img-circle"   圆形图片
					class="img-thumbnail"     相框型图片
		表格
		表单
	组件:
		导航条
		分页条

上面这些写来写去还是去看帮助文档吧,写的不详细,帮助文档中喜欢那种样式,就直接去复制那种样式代码