bootstrap3-导航条,旋转木马,网格
准备工作:
下载bootstrap-3.0.0
新建HTML5页面
引入bootstrap最基础的css文件
引入jquery(在引入其他js之前,先引入jquery)
引入bootstrap的js文件
自定义一个custom.css文件,用来对bootstrap的某些样式进行重写
其它:支持移动设备的不同屏幕大小,提供响应式布局等。。。?
?
主页
?
?
?/*设置正文距离页面顶端80px,否则正文的前面部分将被导航条遮住*/body {padding-top: 80px;}.navbar-nav>li>a {line-height: 50px; /*设置导航条中每个超链接的高度*/font-size: 16px /*设置字号*/}.carousel-control .icon-prev,.carousel-control .icon-next {font-size: 100px; /*前后翻页符号的字体大小*/position: absolute; /*绝对定位*/top: 200px /*离顶部的距离*/}/*图片上说明文字与顶部的绝对定位*/.carousel-inner .item .carousel-caption {position: absolute;top: 200px}/*图片上指示器的与顶部的绝对定位*/.carousel-indicators {position: absolute;top: 400px;}/*以下为设置表格样式*/.container>h1 {text-align: center;}th {background-color: #428bca;color: #ec8007;z-index: 10;text-shadow: 1px 1px 1px #fff;font-size: 24px;}.badge {background-color: #428bca;color: #fff;font-size: 22px;}/*google地图*/#map_canvas { width: 400px; height: 400px;}?
?