## 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. Dubbo 系列（07-1）集群容错 - 服务字典

    Dubbo 系列(07-1)集群容错 - 服务字典 [toc] Spring Cloud Alibaba 系列目录 - Dubbo 篇 1. 背景介绍 本篇文章,将开始分析 Dubbo 集群容错方面的 ...

  2. shell-#！

    当shell执行一个程序时,会要求UNIX内核启动一个新的进程,以便在该进程里执行所指定的程序. 当系统只有一个shell时,退回到/bin/sh 的机制非常方便,但现行的UNIX系统都会拥有好几个s ...

  3. js中三元运算符的两种情况

    一.一般情况 <script type="text/javascript"> var b=5; (b == 5) ? a="true" : a=&q ...

  4. myEclipse 搭建 Spring boot+myBatis+maven 项目流程

    1.新建一个工程 new-->maven project-->next-->next-->在filter中搜索webapp-->group id.Artifact id- ...

  5. testprns printername [printcapname]

    描述 此程序是samba套件的一部分. testprns是个非常简单的测试程序,用于检查smbd作为服务提供的打印机名是否合法. 在这里“Valid”的意思就是“在printcap中可以找到该打印机” ...

  6. 单实例安装elastic和启动报错解决

    下载 先到官网https://www.elastic.co/cn/downloads/past-releases/elasticsearch-5-5-2下载,我安装的是5.5.2的版本,其他版本直接访 ...

  7. 【学术篇】SPOJ GEN Text Generator AC自动机+矩阵快速幂

    还有5天省选才开始点字符串这棵技能树是不是太晚了点... ~题目の传送门~ AC自动机不想讲了QAQ.其实很久以前是学过然后打过板子的, 但也仅限于打过板子了~ 之前莫名其妙学了一个指针版的但是好像不 ...

  8. day07 python列表 集合 深浅拷贝

    day07 python   一.知识点补充     1."".join() s = "".join(('1','2','3','4','5'))  #将字符串 ...

  9. 数组循环移动 空间复杂度O(1)

    ---恢复内容开始--- 题目大意: 输入元素个数,输入数组,输入右移步数,输出结果: 基本思路: 可以把数组(从下标为0开始存储)看成两部分,分别是[0,n-step-1],[n-step,n-1] ...

  10. SpringBoot 2.x 使用 JWT（JSON Web Token）

    一.跨域认证遇到的问题 由于多终端的出现,很多的站点通过 web api restful 的形式对外提供服务,采用了前后端分离模式进行开发,因而在身份验证的方式上可能与传统的基于 cookie 的 S ...