## 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. 201⑨湘潭邀请赛 Chika and Friendly Pairs(HDU6534)

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=6534 题意: 给你一个数组,对于第i个数来说,如果存在一个位置j,使得j>i并且a[j]-k&l ...

  2. 使用element-ui 组件动态合并table的行/列（第二次修改）

    这是第二次修改,在通过调用后台接口返回来的时候,发现了代码中的问题:现在将博客中错误的地方改过来,添加备注 文章需求:动态实现table表格中行/列的自动合并 使用框架及UI类库:Vue+Elemen ...

  3. 14-python基础-列表

    列表常用操作: Ubuntu下进入ipython3中定义一个列表lst=[] 输入lst.TAB ipython会提示列表能够使用的方法. 1.增加列表数据 序号 关键字/函数/方法 说明 1 列表. ...

  4. [POI2010]OWC-Sheep

    题目 不难猜到或者发现的性质,如果连了一条对角线划分出了奇数个点,那么这条对角线肯定不合法:因为划分成三角形就不可能有对角线相交,于是划分成奇数的那一边怎么样也不可能划分成全是偶数 于是我们需要对每一 ...

  5. 分布式-技术专区-Redis分布式锁实现-第二步

    再上次篇章中汇集了相关的分布式锁的概念进行控制,接下来我们采用的是注解声明式开发服务方案,进行声明式开发代替编程式开发方案.  1.利用aop实现分布式锁2.只用在方法上加个注解,同时加上了重试机制 ...

  6. App加载主要流程

    主要流程 Application OnCreate 加载第三方的sdk 加载自身的逻辑 发送远程数据请求 xxx.json 渲染界面 List

  7. 一文读懂MQTT协议

    1  概述 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的"轻量级 ...

  8. python_django_celery的初步使用

    celery学习:http://docs.jinkan.org/docs/celery/ 什么是celery? Celery 是一个简单.灵活且可靠的,处理大量消息的分布式系统,并且提供维护这样一个系 ...

  9. Add cast to是什么意思

    eclipse中是强制类型转换的意思.

  10. Shell基础(六)：使用awk提取文本、awk处理条件、awk综合脚本应用、awk流程控制、awk扩展应用

    一.使用awk提取文本 目标: 本案例要求使用awk工具完成下列过滤任务: 1> 练习awk工具的基本用法    2> 提取本机的IP地址.根分区使用率    3> 格式化输出/et ...