Boostrap&LayUI

Boostrap

官网:http://getbootstrap.com/

中文网:http://www.bootcss.com/

BootStrap 特点

1. 简洁、直观、强悍的前端开发框架,html、css、javascript 工具集,让 web 开发更速、简单。 2. 基于html5、css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设 计,12列格网,样式向导文档。

3. 自定义 JQuery 插件,完整的类库,bootstrap3 基于Less,bootstrap4 基于 Sass 的 CSS 预处理 技术

4. Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。Bootstrap 响应式布局设计, 给用户提供更好的视觉使用体验。

5. 丰富的组件

布局容器

 固定宽度    .container -->
		 

栅格网格系统

行   row     列   column
        行 .roe
        列 col-xs-列数   col-sm-列数    col-md-列数   col-lg-列数

排版



	
		
		
		
	
	
		
		

bootstrap 哈咯副标题

bootstrap 哈咯
bootstrap 哈咯副标题

以后的感谢现在努力

提示效果
主要效果
成功效果
信息效果
警告效果
危险效果

我居左

我居中

我居右

网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份

  • 无序项目列表一
  • 无序项目列表二
  • 首页
  • java学院
  • 在线课堂
HTML 超文本标记语言
HTML称为超文本标记语言,是一种标识性的语言。
测试标题不能超过160px的宽度,否则2个点
我在写一个水平定义列表的效果,我在写一个水平定义列表的效果。
System.out.println("hello");
			public static void main(String[] args){
				System.out.println("hello");
			}
		
保存:ctrl + s

表单



	
		
		
		
	
	
	
		
a标签按钮 span标签按钮
div标签按钮

下拉菜单



	
		
		
		
		
		
	
	
		
		
		
		
		
	

BootStrapDemo



	
		
		
		
		
		
	
	
		
		
	

LayUi

官网:https://www.layui.com

官方文档:https://www.layui.com/doc/

LayUI 的特点

(1)layui属于轻量级框架,简单美观。适用于开发后端模式,它在服务端页面上有非常好的效果。

(2)layui是提供给后端开发人员的ui框架,基于DOM驱动。

Boostrap&LayUI_第1张图片

 基础使用



	
		
		
		开始使用layui
		
	
	

		

		
		
	

数据表格

Boostrap&LayUI_第2张图片

 实现流程:

  1.  引入css与js
  2. 准备一个容器
  3. 加载table模块
  4. 加载table实例


	
		
		分页
		
		
		
	
	
		

 



	
		
		
		
	
	
		

你可能感兴趣的:(前端,前端)