java小白也能快速学会Bootstrap(简单易理解)

Bootstrap框架:

1.概述:

Bootstrap是基于HTML,CSS,JavaScrpt,提供了优雅的HTML和CSS规范。说白了,Bootstrap就是一个前端框架。那么什么是框架呢?框架则是一个半成品软件,开发人员可以借助框架简化编码,使得web开发更加快捷灵活。(简而言之就是通过给标签添加属性类class来改变标签的样式)。

我们之前学了许多javase基础性知识,我们学的javaweb也是在学web开发的基础性知识。将来我们通过javaweb知识和javase知识就可以做出来非常丰富的网站的BS架构程序。但是我们通过这些基础性知识制作过程中,代码的编码量非常庞大,效率特别低!非常麻烦。

正因如此,出现了一些大神程序员将基础性知识封装起来,让开发变得更简单,更高效!封装起来之后提供了一些jar包,我们就可以借助这些jar包快速开发出项目。而Bootstrap就是我们所说的框架

2.好处:

第一个好处是,该框架定义了许多CSS样式JS的插件,我们开发人员可以使用这些样式和插件,以至于得到丰富的页面效果

第二个好处是,响应式布局: 同一套页面可以兼容不同分辨率的设备。 让每一种设备可以得到良好的体验,该布局方式可以根据分辨率不同自动调整布局和大小。比如说苹果手机的官网首页就是响应式布局方式。

当我们使用PC端(电脑) 访问苹果官网如下图:

java小白也能快速学会Bootstrap(简单易理解)_第1张图片

当我们使用手机端访问苹果官网如下图:

java小白也能快速学会Bootstrap(简单易理解)_第2张图片
我们可以明显看到,它只需要一套页面却可以兼容不同分辨率的设备,非常方便。这就是我们说的
响应式布局。

3.学习Bootstrap前的准备

第一步, 我们需要先去下载Bootstrap。 Bootstrap下载地址
点击链接进去之后点击中间的蓝色按钮。

然后继续点击按钮 下载Bootstrap


最后点击 用于生产环境的Bootstrap, 安装即可完成下载。

java小白也能快速学会Bootstrap(简单易理解)_第3张图片
第二步,下载完成之后我们需要将下载好文件中的三个文件夹复制到idea的项目中。

java小白也能快速学会Bootstrap(简单易理解)_第4张图片
java小白也能快速学会Bootstrap(简单易理解)_第5张图片

第三步, 创建html页面,引入必要的资源文件。
但是到底哪些资源是必要的呢?该引入哪些资源呢?我们可以看Bootstrap官网文档。
路线是 进入官网–>点击导航栏的 “起步”–>在页面中找到 “基本模块”。

java小白也能快速学会Bootstrap(简单易理解)_第6张图片
然后将代码全部复制到idea中的HTML页面上。

java小白也能快速学会Bootstrap(简单易理解)_第7张图片
然后将上图中 link标签改成下图所示:

在这里插入图片描述
继续将 body标签中的最后一个script标签改成下图所示:

在这里插入图片描述
最后一步,向项目js目录下面中导入下如文件:
在这里插入图片描述
并且将body标签中第一个script标签改成如下图所示:

在这里插入图片描述
总结: 一共引入三个文件。一个css文件,两个js文件。最后运行一下就能打印出
" 你好,世界!"。 这样,bootstrap最基本的入门案例就写完了!写完的这个页面我们要好好保存,将来任何页面都要在这个页面上改造。所以说这个页面就是基本的模板,代码如下,可以直接复制!

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</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>

</head>
<body>
<h1>你好,世界!</h1>
</body>
</html>

4.栅格系统

我们之前说过,响应式布局可以让同一套页面可以兼容不同分辨率的设备。那么它是怎么实现的呢?在bootstrap中实现 响应式布局 依赖于 栅格系统,何为栅格系统?该系统相当于:将一行平均12个格子,可以去指定元素占几个格子。

步骤:
1.定义容器:分为两类(container:两边留白 , container-fluid:每一种设备都是100%宽度)
2.定义行:样式是row
3.定义元素。指定该元素在不同的设备上,所占格子的数目。样式:col-设备代号-格子数目。

设备代号如下图所示:

java小白也能快速学会Bootstrap(简单易理解)_第8张图片
栅格系统注意事项:

  1. 一行总如果格子数目超过12,那么超出的部分自动换行。下面代码可以看出格子数目是13,所以两头小猪将会换行展示。
<body>
    <!--定义容器-->
    <div class="container-fluid">
        <!--定义行-->
        <div class="row">
            <!--定义元素
            <div class="col-md-12 inner">小猪</div>
            <div class="col-md-1 inner">小猪</div>
        </div>
    </div>
</body>

运行结果:

java小白也能快速学会Bootstrap(简单易理解)_第9张图片
2.栅格类属性可以向上兼容。栅格类适用于比屏幕宽度大于或等于分界点大小的设备。

3.栅格类属性不可以向下兼容。如果真实的设备的宽度小于设置栅格类属性的设备代码的最小值,默认会一个元素占满一整行
代码如下:

<!--定义容器-->
    <div class="container">
        <!--定义行-->
        <div class="row"
            <div class="col-md-4 inner">小猪</div>
            <div class="col-md-4 inner">小猪</div>
            <div class="col-md-4 inner">小猪</div>
        </div>
    </div>

运行结果:

java小白也能快速学会Bootstrap(简单易理解)_第10张图片

5.插入CSS样式

注意:这部分的知识,我们作为JAVA程序员,只需要能查看文档(Bootstrap官网可以查看),使用CV大法达到我们想要的效果就可以了,不需要刨根问底,因为我们并不需要专门去写CSS样式。

一、全局CSS样式:

1. 按钮: class=“btn btn-default” (default可以通过修改展现出不同的样式)
我们创建几个按钮标签,举个例子。

<body>
    <button type="submit">Button</button>
    <input type="button" value="Input">
    <input type="submit" value="Submit">
</body>

效果如下:

在这里插入图片描述

当我们向按钮标签添加类:

<button class="btn btn-success" type="submit">Button</button>
<input class="btn btn-info" type="button" value="Input">
<input class="btn btn-warning" type="submit" value="Submit">

运行结果如下:

在这里插入图片描述

我们会发现通过添加了几个就可以把变得花里胡哨。使用上面的类可以快速创建一个带有预定义样式的按钮。

2.图片:
当我们再页面中写入一张图片,我们会发现图片的宽度和高度都是固定的,并不会随着网页窗口的变化而发生变化。并不是我们所说的响应式布局。 通过为图片添加 .img-responsive 类可以让图片支持响应式布局。 其实质是为图片设置了 (max-width: 100%;、 height: auto; 和 display: block;) 属性,从而让图片在其父元素中更好的缩放。

<img src="..." class="img-responsive"> //加入这个属性后,图片会永远会适应页面大小。

我们话可以通过为 标签添加以下相应的类,可以让图片呈现不同的形状。

<img src="..."  class="img-rounded">
<img src="..."  class="img-circle">
<img src="..."  class="img-thumbnail">

代码效果如下:

java小白也能快速学会Bootstrap(简单易理解)_第11张图片

3.表格
根据上面所学的,我们可以知道向标签中添加就可以改变样式,同样表格也可以通过添加类让表格呈现不同的样式。先来一套最基本的表格代码:

<body>
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>001</td>
            <td>小猪</td>
            <td>20</td>
        </tr>
        <tr>
            <td>002</td>
            <td>小猪</td>
            <td>20</td>
        </tr>
        <tr>
            <td>003</td>
            <td>小猪</td>
            <td>20</td>
        </tr>
    </table>
</body>

显示效果如下:
java小白也能快速学会Bootstrap(简单易理解)_第12张图片
当我们向table标签中插入类,它就会发生天翻地覆的变化,这就是框架的魅力:真的是太方便了!

    <table class="table table-bordered">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>001</td>
            <td>小猪</td>
            <td>20</td>
        </tr>
        <tr>
            <td>002</td>
            <td>小猪</td>
            <td>20</td>
        </tr>
        <tr>
            <td>003</td>
            <td>小猪</td>
            <td>20</td>
        </tr>
    </table>

表格就变成下面这个样子:

java小白也能快速学会Bootstrap(简单易理解)_第13张图片

5.总结:

Bootstrap框架不仅定义了许多类属性去改变标签的样式,还有许多插件或组件,例如:轮播图,导航条等… 在官方网站列举的非常清楚,我们可以通过查看官网资料查询使用,官网自然比我写的要好得多,例如还有轮播图,导航条,分页条等许多组件插件我们就不再意义列举了,想要什么样式官网都写的明明白白。作为java程序员我们要懂得取舍,毕竟我们对前端的知识不会过多的使用,所以未必一定要过于深究内部原理,会用就行。

你可能感兴趣的:(java,html,bootstrap,css)