一篇随笔会用Bootstrap

郑重声明:
  本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途,否则后果请用户自负。

Bootstrap

0 简介

  • Bootstrap是美国Twitter公司的设计师 Mark Otto 和 Jacob Thornton 合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

  • 2013年

  • 前端框架,快速构建好看的网页

  • 与Vue不同,BootStrap是一个前端开发框架,而Vue是一个Js库组件化开发框架

1 如何使用

  • 导入jQuery
  • 导入Bootstrap的css
  • 导入Bootstrap的js
  • 需要什么控件直接网站考入添加对应的class即可


	
		
		
		
		
		
	
	
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	

2 栅格系统

Bootstrap栅格系统将页面等比例划分为12份

  • 首先需要一个div class="caontainer"
  • 内层需要一个div class="row"
  • 在内存div中,对于元素控件col-xl-列数来及控制占用的列数
  • 当占的列数超过总列数时,会直接换行

等比例划分,一份代码适用于各种平台:pc、mobile



	
		
		
		
		
		
		
	
	
		
一共12列,我占12列
一共12列,我占1列
一共12列,我占1列
一共12列,我占1列
一共12列,我占1列
一共12列,我占1列
一共12列,我占1列
一共12列,我占1列
一共12列,我占1列
一共12列,我占1列
一共12列,我占1列
一共12列,我占1列
一共12列,我占1列
一共12列,我占3列
一共12列,我占3列
一共12列,我占3列
一共12列,我占8列
一共12列,我占6列

3 日期控件

根据日期控件里的例子来使用


4 轮播图