bootstrap02

大家好!我还是那个小何哈!今天bootstrap02,老样子,先上思维导图

bootstrap02_第1张图片

今天的内容相对较少,昨天和大家介绍过了,那就再回顾一下

Bootstrap

W:what 是一个响应式的前端框架  大PC-lg 中PC-md 平板-sm 手机端-xs
W:why 支持响应式 移动端优先 浏览器支持 容易上手
W:where 企业网站、博客、后台、简单简洁的前台页面

H:how
准备工作:下载 解压 引入(2个js  1个css)

组件:导航条 navbar
      表单 form-group 
      输入框组 input-group
      栅格:Grid-system  12列

支持手机端:

下载Bootstrap

网址:https://v4.bootcss.com/

今日内容(仅供参考):

从上思维导图可以看出我们一共有五个案例,今天讲第一个案例

案例1:首页轮播图实现

首页轮播呢可以在bootstrap网址里下载,里面资源嘎嘎多

ok,给大家看看代码

效果图下:bootstrap02_第2张图片

这个它是可以自动播放的

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

代码分享如下:

效果图如下:bootstrap02_第3张图片

 鼠标点到的分类那边会有高亮显示

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

代码如下:

...
冷间谍
...
第一商会
...
狂人日记
...
学文
...
自动化运维

效果图如下:bootstrap02_第4张图片

 案例4:首页整合

下面这个代码就是以上整合:



	
		
		案例4:首页整合
		
		
		
		
	
	
		
	
		
		
				
						
新书上架
...
冷间谍
...
第一商会
...
狂人日记
...
学文
...
自动化运维
热门书籍
...
Java
...
AutoCAD
...
时光走了你还在
...
我们仍未知道爱的样子
...
我们仍未知道爱的样子
3 of 3

效果图如下:bootstrap02_第5张图片

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

登录代码如下:



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

效果图如下:bootstrap02_第6张图片

 今天讲的这些框架都是往bootstrap网址下找到,小伙伴可以去找哦,框架超多~

今天的分享到这里了,我是小何,下期再见!!!!

你可能感兴趣的:(前端框架,前端,html,bootstrap)