javaweb第六天 Bootstrap基础

一，Bootstrap简介

一，Bootstap简介
是基于HTML，CSS，JavaScript开发的简介，直观，强悍的前端开发框架，使得web开发更加的简洁。

二，响应式布局
响应式布局是一个网站能够兼容多个终端（手机，电脑，平板等），Bootstap就是响应式布局最成功的实现。

二，使用Bootstrap

一，使用Bootstrap需要依次引入（顺序不能错误）
.bootstrap.css
.jquery-1.8.3.min.js
.bootstrap.js

    "css/bootstrap.css" rel="stylesheet">
    
    

二，BootStrap布局

1，Bootstrop 布局一般依赖于一个容器(这个容器一般建议使用div)

class=“container” 样式是两端留空白
class=“container-fluid” 样式，宽度会填满

"container" style="background-color: black;height: 50px">

container效果图：

"container-fluid" style="background-color: black;height: 50px">

container-fluid效果图：

2，Bootstrop 的栅格布局

1，使用栅格布局时，系统会自动分为最多12列行（row）与列（column）的组合来创建页面布局。

"container-fluid">
    
"row">
        
"col-sm-4">"img/logo.png">
        
"col-sm-4">"img/header.png">
        
"col-sm-4">
            "#">登录
            "#">注册
            "#">购物车
        
    

效果图：

2，使用栅格布局的注意点
①，如果当前的列数大于12，超出的会自动往下移动
②，如果不够直接在一列显示
③，列里是可以进行相互嵌套，必须是行列进行嵌套
④，列中可以同时写多个属性来进行适配
⑤，屏幕如果比设置尺寸大，沿用小屏幕的尺寸
⑥，屏幕如果比设置尺寸小，则会单独占一行

3，设置栅格偏移量
设置偏移:col-sm-offset-4 offset 设置偏移（不能够超过12列）