Java初学者笔记25—Bootstrap

Bootstrap：

1. 概念： 是基于 HTML、CSS、JavaScript 的框架，其中有许多的内容，我们通过css 和

js的方式也可以自己做到，但是会过于复杂，因此，这是我们可以使用Bootstrap框架（其中有丰富的样式），根据bootstrap文档，查找样式对应的代码，直接复制粘贴，修改到自己满意的成都后使用。

   *响应式布局：同一套页面可以兼容不同分辨率的设备。

 

2. 使用前的准备

1. 下载Bootstrap

        2  把资源文件导入到编辑器中。

3  创建html页面，引入刚刚导入的资源文件

            (直接复制粘贴，改一下路径就好)

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

*上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！

    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

* jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)

    <script src="js/jquery-3.2.1.min.js"></script>

*加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。

    <script src="js/bootstrap.min.js"></script>

 

 

3  响应式布局：同一套页面可以兼容不同分辨率的设备。电脑屏幕很大，手机屏幕很小，让显示在电脑屏幕上的内容，通过栅格系统的方式，更为丝滑的显示在手机上

 

  * 实现：依赖于栅格系统：默认一行是12个格子，可以指定单个元素占几个格子，从

而让每行会显示多少个元素。（可以使用<div>标签）

* 步骤：（以下全部都是定义在class属性中的属性值）

1. 定义容器，相当于之前的table、

1. container：两边留白

2. container-fluid：每一种设备都是100%宽度

2. 定义行

相当于之前的tr   用row属性值。

3 定义元素：   

  属性值是   col-设备代号-格子数目

    设备代号：

1. xs：手机 2. sm：平板  3. md 桌面显示器  4. lg 大桌面显示器

可以向上兼容：定义手机一行一个元素，切换到电脑屏幕，也是一行显示一个元素（设置一个元素的格子数目为12）

不可以向下兼容：定义电脑屏幕一行12个元素，到了手机，还是会默认显示一行一个元素（设置一个元素的格子数目为1）

 

 

4  CSS样式和JS插件：

查找自己期望的样式，复制粘贴其代码，自己修改之后，拿去就用，非常的方便，并且自己还可以用栅格系统，对其进行排版

*全局CSS样式：给按钮，图片，表单，表格

*组件：导航条，分页条

        *插件：轮播图

 

别人给你一个htlm文档，若果有一些代码。自己不清楚其具体的作用，显示的是什么内容，那么就把这行代码删除，看看页面缺少了什么