## 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. HDU6655 Just Repeat(2019杭电多校J题)

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=6655 简单博弈问题,A,B手里各有n,m张牌,牌有颜色,两人轮流出牌(A先出),一个人只能打出对放未打 ...

  2. 使用jmeter做接口测试----柠檬不萌！

    一.乱码解决方案 1.jmeter查看结果树乱码 (1)在jmeter的bin目录下找到jmeter.properties这个文件,添加上 sampleresult.default.encoding= ...

  3. Redis Sentinel用法

    1 Redis Sentinel 1.1 哨兵的作用 1. 监控:监控主从是否正常 2. 通知:出现问题时,可以通知相关人员 3. 故障迁移:自动主从切换 4. 统一的配置管理:连接者询问sentin ...

  4. MySQL全面优化，速度飞起来！

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 作者:惨绿少年 https://www.cnblogs.com/clsn/p/8214048.html 在进行MySQL的优 ...

  5. Linux下多线程pthread内存泄露

    目标文件:/proc/<pid>/maps 若其中出现了大量的8K左右的内存碎片,则说明出现了内存泄露.同理,如果相应pid进程的maps文件中出现了很多内存碎片,也说明出现了内存泄露.  ...

  6. python配置文件configparser详解

    Python中一般需要配置文件,配置文件一般以.cfg, .conf, .ini结尾.配置文件可以将数据库抽离到以 .ini(Windows)结尾的文件中,这样做的优点在于可在配置文件中添加多个数据库 ...

  7. CTU OPEN 2017 Punching Power /// 最大独立集

    题目大意: 给定n 给定n个机器的位置 要求任意两个机器间的距离至少为1.3米 求最多能选择多少个机器 至少为1.3米 说明若是位于上下左右一步的得放就不行 将机器编号 将不能同时存在的机器连边 此时 ...

  8. 在同一个项目中灵活运用application/json 和application/x-www-form-urlencoded 两种传输格式（配合axios,同时配置loading）

    'use strict' import axios from 'axios' // import qs from 'qs' import { Notification} from 'element-u ...

  9. Python之删除字符串中不需要的字符

    简单的 str="---你好=====" print(str.strip("-=")) # 你好 从文件中读取多行数据,可以用生成器表达式 with open( ...

  10. Codeforces 346C Number Transformation II 贪心（复杂度计算）

    题意及思路:https://www.cnblogs.com/liuzhanshan/p/6560499.html 这个做法的复杂度看似是O(n ^ 2),实际上均摊是O(n)的.我们考虑两种极端数据: ...