Bootstrap部分案例

目录

准备工作

一、案例1:首页轮播图实现

代码如下

效果如下

二、案例2:首页书籍分类实现

主要用于组件:列表组-List group

代码如下

效果如下          ​

三、案例3:首页新书上架&热门书籍实现

页面内容需要:画像-Figure

代码如下

效果如下

四、案例4:首页整合

1、完善轮播图(左右箭头 指示灯样式)

2、完善新书上架&热门书籍

代码如下

效果如下

五、案例5:实现登录&注册页面

主要用于组件:表单-Forms

代码如下

效果如下


准备工作:

页面中引入库
bootstrap.min.css:Bootstrap核心样式【添加到head标签中】

jquery-3.3.1.js:jQuery库
【注意:必须在Bootstrap核心库引入之前引入jQuery库】
bootstrap.min.js:Bootstrap核心库
【注意】②③添加到之前,如下:


<1--引入Bootstrap的类库-->

Bootstrap部分案例_第1张图片

Bootstrap文档:

简介 · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网

一、案例1:首页轮播图实现

代码如下:

HTML:

在Bootstrap01的代码基础上增加

样式:






效果如下:

Bootstrap部分案例_第2张图片Bootstrap部分案例_第3张图片

 自带翻页!!

二、案例2:首页书籍分类实现

主要用于组件:列表组-List group

代码如下:

HTML:


样式:






效果如下:

Bootstrap部分案例_第4张图片      移上后效果:           Bootstrap部分案例_第5张图片

 同样自带鼠标移上事件!!

三、案例3:首页新书上架&热门书籍实现

页面内容需要:画像-Figure

代码如下:

HTML:


...
冷间谍
...
冷间谍
...
冷间谍
...
冷间谍
...
冷间谍
...
冷间谍
...
冷间谍
...
冷间谍
...
冷间谍
...
冷间谍

样式:






效果如下:

Bootstrap部分案例_第6张图片

四、案例4:首页整合

1、完善轮播图(左右箭头 指示灯样式)

2、完善新书上架&热门书籍

代码如下:

HTML:


	
	
	
	
	
新书上架
...
冷间谍
...
冷间谍
...
冷间谍
...
冷间谍
...
冷间谍
...
冷间谍
...
冷间谍
...
冷间谍
...
冷间谍
...
冷间谍

样式:






效果如下:

Bootstrap部分案例_第7张图片

五、案例5:实现登录&注册页面

主要用于组件:表单-Forms

代码如下:

HTML:


	

用户登录

 样式:


效果如下:

Bootstrap部分案例_第8张图片

Bootstrap部分案例就分享到这了,希望能对大家有所帮助! 

你可能感兴趣的:(Bootstrap,java)