Java基础之bootstrap概述篇

桃扇骨 2022-03-25 10:38 476阅读 0赞

1、bootstrap介绍

\*Bootstrap，基于HTML、CSS、JavaScript的前端框架（半成品）。其预定义一套css样式和与此样式对应的jQuery代码，我们只需要提供固定的HTML结构，添加固定的css样式，就可以完成指定效果的实现。

\*Bootstrap在jQuery的基础上工作，可以理解Bootstrap就是jQuery的一个插件。

\*Bootstrap使得Web开发更加便捷，代码优雅，美观大方。

\*由Twitter公司的设计师Mark Otto和Jacob Thornton合作开发。

\*Bootstrap基础入门使用的都是自带css样式，该机开发中需要使用HTML5、css3、动态css语言Less进行自定义开发，Java EE课程中学习时的“基础入门”。

\*国内一些移动开发者较熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来

\*中文官网：http://www.bootcss.com/

2、响应式布局

\*响应式布局：一个网站能够兼容多个终端（手机，ipad等），而不需要为每个终端做一个特定的版本。此概念是为解决移动互联网浏览而诞生的。

\*响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

\*Bootstrap就是响应式布局最成功的实现，为了兼容不同的浏览器采用jQuery，为了适配不同的终端采用css3 Media Query（媒体查询）

3、环境搭建

3.1、中文官网地址：[https://v3.bootcss.com/getting-started/\#download][https_v3.bootcss.com_getting-started_download]

3.2、目录结构：

![20190120140623980.png][]

3.3、内容结构:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA3ODQ1MA_size_16_color_FFFFFF_t_70][]

3.4、模板介绍

<!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">
        
        <title>Bootstrap 101 Template</title>
    
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    
        
        
        
      </head>
      <body>
        <h1>你好，世界！</h1>
    
        
        
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
      </body>
    </html>

[https_v3.bootcss.com_getting-started_download]: https://v3.bootcss.com/getting-started/#download
[20190120140623980.png]: /images/20220325/9842eccb1f074baab4f55087e9ab3b17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA3ODQ1MA_size_16_color_FFFFFF_t_70]: /images/20220325/9e9420797aff47a39294c801ec6ee512.png