## Bootstrap：
    1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
        * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
        * 好处：
            1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
            2. 响应式布局。
                * 同一套页面可以兼容不同分辨率的设备。

2. 快速入门
        1. 下载Bootstrap
        2. 在项目中将这三个文件夹复制
        3. 创建html页面，引入必要的资源文件

<!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 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>
        </head>
        <body>
        <h1>你好，世界！</h1>
        
        </body>
        </html>

## 响应式布局
    * 同一套页面可以兼容不同分辨率的设备。
    * 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
    * 步骤：
        1. 定义容器。相当于之前的table、
            * 容器分类：
                1. container：两边留白
                2. container-fluid：每一种设备都是100%宽度
        2. 定义行。相当于之前的tr   样式：row
        3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
            * 设备代号：
                1. xs：超小屏幕 手机 (<768px)：col-xs-12
                2. sm：小屏幕 平板 (≥768px)
                3. md：中等屏幕 桌面显示器 (≥992px)
                4. lg：大屏幕 大桌面显示器 (≥1200px)

* 注意：
            1. 一行中如果格子数目超过12，则超出部分自动换行。
            2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
            3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

## CSS样式和JS插件
    1. 全局CSS样式：
        * 按钮：class="btn btn-default"
        * 图片：
            *  class="img-responsive"：图片在任意尺寸都占100%
            *  图片形状
                *  <img src="..." alt="..." class="img-rounded">：方形
                *  <img src="..." alt="..." class="img-circle"> ： 圆形
                *  <img src="..." alt="..." class="img-thumbnail"> ：相框
        * 表格
            * table
            * table-bordered
            * table-hover
        * 表单
            * 给表单项添加：class="form-control" 
    2. 组件：
        * 导航条
        * 分页条
    3. 插件：
        * 轮播图

java-day27的更多相关文章

  1. Spark案例分析

    一.需求:计算网页访问量前三名 import org.apache.spark.rdd.RDD import org.apache.spark.{SparkConf, SparkContext} /* ...

  2. 【Java入门提高篇】Day27 Java容器类详解（九）LinkedList详解

    这次介绍一下List接口的另一个践行者——LinkedList,这是一位集诸多技能于一身的List接口践行者,可谓十八般武艺,样样精通,栈.队列.双端队列.链表.双向链表都可以用它来模拟,话不多说,赶 ...

  3. java基础-day27

    第04天 java基础加强 今日内容介绍 u Xml的综合案例 u 注解 u 类的加载 u 动态代理 第1章   注解 1.1  注解概述 l  什么是注解:Annotation注解,是一种代码级别的 ...

  4. Java学习day27

    今天跟着做了一个模拟龟兔赛跑的程序 只有一条赛道,乌龟和兔子在同一条赛道上比赛,使用了多线程 为了实现兔子睡觉,在run方法内增加了当前奔跑者是否是兔子的判断且当前奔跑步数是否是10的整数倍的判断,如 ...

  5. day27

    27.01 反射(类的加载概述和加载时机) 1.类的加载 当程序要使用某个类时,如果该类还未加载到内存中,系统会通知加载,连接,初始化三步来实现对这个类初始化 a.加载 是指将.class文件读入内存 ...

  6. 尚硅谷Java——宋红康笔记【day25-day29】

    day25 Map接口 一.Map的实现类的结构: |----Map:双列数据,存储key-value对的数据 ---类似于高中的函数:y = f(x) |----HashMap:作为Map的主要实现 ...

  7. 故障重现(内存篇2)，JAVA内存不足导致频繁回收和swap引起的性能问题

    背景起因: 记起以前的另一次也是关于内存的调优分享下   有个系统平时运行非常稳定运行(没经历过大并发考验),然而在一次活动后,人数并发一上来后,系统开始卡. 我按经验开始调优,在每个关键步骤的加入如 ...

  8. Elasticsearch之java的基本操作一

    摘要   接触ElasticSearch已经有一段了.在这期间,遇到很多问题,但在最后自己的不断探索下解决了这些问题.看到网上或多或少的都有一些介绍ElasticSearch相关知识的文档,但个人觉得 ...

  9. 论：开发者信仰之“天下IT是一家“(Java .NET篇)

    比尔盖茨公认的IT界领军人物,打造了辉煌一时的PC时代. 2008年,史蒂夫鲍尔默接替了盖茨的工作,成为微软公司的总裁. 2013年他与微软做了最后的道别. 2013年以后,我才真正看到了微软的变化. ...

  10. 故障重现, JAVA进程内存不够时突然挂掉模拟

    背景,服务器上的一个JAVA服务进程突然挂掉,查看产生了崩溃日志,如下: # Set larger code cache with -XX:ReservedCodeCacheSize= # This ...

随机推荐

  1. 点读系列《Jenkins用户文档》

    Jenkins用户手册官网地址:点击打开 开源 CI&CD 软件 自动化各种任务, build test deploy 支持各种运行方式 Jenkins入门 入门指南 需要java和docke ...

  2. Gradle教程

    Ant和Maven共享在Java市场上相当大的成功.ANT是在2000年发布了第一个版本的工具,它是基于程序编程思想的发展. 后来,人们在 Apache-Ivy的帮助下,网络接受插件和依赖管理的能力有 ...

  3. 洛谷 P2023 维护序列——线段树

    先上一波题目 https://www.luogu.org/problem/P2023 复习了一波线段树 题目涉及的操作有区间加 区间乘以及区间求和 tips:线段树在传标记的时候 优先传乘法标记再传加 ...

  4. sparkSQL获取DataFrame的几种方式

    sparkSQL获取DataFrame的几种方式 1. on a specific DataFrame. import org.apache.spark.sql.Column df("col ...

  5. Spring整合Hibernate报错：annotatedClasses is not writable or has an invalid setter method

    Spring 整合Hibernate时报错: org.springframework.beans.factory.BeanCreationException: Error creating bean ...

  6. Angular 4 变更检测机制 ChangeDetectorRef 使用方法

    1.在angular 2中,回调函数的返回结果,不会自动更新视图层的显示,可以用 ChangeDetectorRef 来驱动angular更新视图. import {ChangeDetectorRef ...

  7. 为 STM32 移植 Berry 脚本语言

    Berry 是我为单片机设计的一款脚本语言,该语言具有资源占用小.平台无关.执行速度快和易于掌握等优点.在单片机上使用脚本语言可以提高单片机的二次开发能力以及调试效率,同时也是一种比较新颖的玩法.本教 ...

  8. Codeforces Round #552：G. Minimum Possible LCM

    官方题解是时间复杂度为O(nd)的.这里给出一个简单实现但是时间复杂度为O(NlogN) (N=1e7) 因为 a*b/gcd(a,b)=lcm(a,b) 所以我们可以枚举每一个因子,然后找到存在这个 ...

  9. Django之template操作

    一.模板渲染的原理 (一)使用 模板渲染首先有一个模板对象Template,然后有一个上下文对象Context,通过render方法进行渲染,最后返回字符串,render方法的本质还是调用了HttpR ...

  10. mybatis快速搭建

    结构图 1.创建maven项目 2.引入依赖 <dependency> <groupId>mysql</groupId> <artifactId>mys ...