javaWeb学习第六天------Bootstrap入门

Bootstrap的使用

第三方的框架的使用

1.在官网下载资源(lib js css) demo（配置文档）
2.根据配置文档,在复制(一定要主要其写的语法)
3.发现框架bug问题可以去相应的论坛或官网找解决问题的办法

Bootstrap介绍

1.底层主要提供了一些html css 样式 js (封装)

2.主要提供一些css 或者是js使得布局页面(做效果比较简单)

3.只需要知道如何去配置(使用)

好处：

1.使得web开发的效率更高
2.支持响应式布局==》可以适配多个在终端(pc 移动端)

Bootstrap的使用

开发的步骤:

在head内引入三个文件 bootstrap.css ，jquery-1.8.3.min.js ，bootstrap.js（必须按照这个循序）

使用的时候在标签内属性class=“写入Bootstrap定制的样式”

<div class="container-fluid"></div>//定义了一个容器，这个容器全屏填充

响应式布局：栅格系统

栅格系统：

• 前端的代码适应不同尺寸(使用与移动端) 屏幕。除了Bootstrap另外常用的解决适应的框架 renative， vue.js
• Bootstrop 主要用于来布局与适配
• Bootstrop 布局一般依赖于一个容器(这个容器一般建议使用div)，使用Bootstrop 给定的属性值来定义容器，如被定义了的div，其性质类似table
  class=“container” 样式是两端留空白的容器
  class=“container-fluid” 样式，宽度会填满的容器
• Bootstrop 的栅格布局 系统会自动分为最多12列 行（row）与列（column）的组合来创建页面布局 ==<类似于表格 (容器)div +行+列+内容 ==》 table+ tr td+内容
• 设置偏移:col-sm-offset-4 offset 设置偏移（不能够超过12列）

注意点:

1. 如果当前的列数大于12，超出的会自动往下移动
2. 如果不够直接在一列显示
3. 列里是可以进行相互嵌套，必须是行列进行嵌套
4. 列中可以同时写多个属性来进行适配
5. 屏幕如果比设置尺寸大==》沿用小屏幕的尺寸
6. 屏幕如果比设置尺寸小==>则会单独占一行

<div class="container-fluid">//定义一个长度占满的容器：类比table
    <div class="row">//定义的容器内的行。使用row定义：类比table的tr
        <div class="col-lg-4"><img src="image/logo2.png"></div>//定义了容器内的列数，并且规定每个列数占多少个列：类比table表格的一行合并多少个列，作为这个格子布局的占的大小
        <div class="col-lg-4"><img src="image/header.png"></div>
        <div class="col-lg-4">//这里是吧12个列分成四份每个列占了四个格子
           <div id="one"><a href="#">登录</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">注册&nbsp;&nbsp;&nbsp;&nbsp;</a><a href="#">购物车</a></div>
        </div>
    </div>
</div>

对于Bootstrop 更多的操作参考官方文档：https://www.bootcss.com/