bootstrap学习笔记——黑马商城案例.pdf

bootstrap学习笔记——⿊马商城案例

bootstrap学习笔记——⿊马商城案例

1.完成bootstrap的初始化⼯作

2.创建9个div

1.第⼀个div：存放logo信息，在中等屏幕，每个占四份，⼩屏幕，超⼩屏幕，每个占12份

2.第⼆个div：存放导航条，不⽤控制响应式

3.第三个div：存放轮播图，不⽤控制响应式

4.第四个div：存放热门商品

1.上下切分为两个div

上⾯的div

存放热门商品⽂字信息

下边的div

存放商品图⽚

切分为两个div

左边的div

存放竖着的⼤图：在中等屏幕占2份，⼩屏幕占12份，超⼩屏幕隐藏

右边的div

存放具体商品⼩图：在中等屏幕的时候占10份，⼩屏幕占12

份，超⼩屏幕12

⼤图：在中等屏幕的时候占6份，⼩屏幕占隐藏，超⼩屏幕隐藏

⼩图：在中等屏幕的时候占2份，⼩屏幕占三份，超⼩屏幕6份

5.第五个div：存放图⽚

6.第六个div：存放热门商品

1.上下切分为两个div

上⾯的div

存放热门商品⽂字信息

下边的div

存放商品图⽚

切分为两个div

左边的div

存放竖着的⼤图：在中等屏幕占2份，⼩屏幕占12份，超⼩屏幕隐藏

右边的div

存放具体商品⼩图：在中等屏幕的时候占10份，⼩屏幕占12

份，超⼩屏幕12

⼤图：在中等屏幕的时候占6份，⼩屏幕占隐藏，超⼩屏幕隐藏

⼩图：在中等屏幕的时候占2份，⼩屏幕占三份，超⼩屏幕6份

7.第七个idiv：存放图⽚

8.第⼋个div：存放友情链接

9.第九个div：存放版权信息

代码实现

!DOCTYPEhtml

html

head

metacharset=utf-8

title/title

scripttype=text/javascriptsrc=../js/jquery-1.11.0.min.js

//写⼊bootstrap提供的组件，css样式，js，jQuery

/script

linkrel=stylesheettype=text/csshref=../css/bootstrap.css/

scriptsrc=../js/bootstrap.jstype=text/javascriptcharset=utf-8/script

scripttype=text/javascript

$(function(){

//实现轮播图的⾃动轮播

$(.carousel).carousel({

interval:2000

})

})

/script

/script

/head

body

divclass=container-fluid

div

!--1.第⼀个div：存放logo信息，在中等屏幕，每个占四份，⼩屏幕，超⼩屏幕，每个占12份--

!--嵌套三个div--

divclass=col-md-4col-sm-12col-xs-12

imgsrc=../img/img/logo2.png

/div

divclass=col-md-4col-sm-12col-xs-12

imgsrc=../img/img/header.jpg

/div

divclass=col-md-4col-sm-12col-xs-12text-centerstyle=padding-top:20px;

ahref=#登录/a

ahref=#注册/a

ahref=#购物车/a

/div

/div

divclass=clearfix

!--清楚浮动效果，否则将覆盖上边图⽚--

/div

div

!--2.第⼆个div：存放导航条，不⽤控制响应式--

navclass=navbarnavbar-default

divclass=container-fluid

!--Brandandtogglegetgroupedforbette