一切都是浮云

# 前端框架

# 框架和库的区别？

库，相当于你的工具箱，组件之间彼此独立。 框架，是一套解决方案。

# 国产流行框架

  1. 妹子框架：http://amazeui.shopxo.net/
  2. layUI框架：https://www.layui.com/ （PC端）
  3. 饿了么框架：http://element-cn.eleme.io/2.0/#/zh-CN（PC端）
  4. iview框架：https://www.iviewui.com/components/icon （PC端）
  5. vant框架：https://youzan.github.io/vant/#/zh-CN/swipe（移动端）
  6. mui框架：https://dev.dcloud.net.cn/mui/（移动端）
  7. 编程语言排行榜
  8. 有意思的项目
  9. Linux命令大全

# bootstrap框架

bootstrap 由推特公司两名前端开发工程师开发，流行时间长，属于经典框架，但由于组件和插件非常少，所以在真实项目中应用越来越少。

# 安装部署

  1. 前往官网下载程序包，https://v3.bootcss.com/。
  2. 单击页面中下载bootstrap按钮
  3. 选择 用于生产环境的 Bootstrap 下载
  4. 在页面头部引入bootstrap框架的样式
<head>
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
  1. 载入bootstrap的插件js文件，注意需要jquery库，并且不能低于1.9.1版本
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>

整个bootstrap前端框架安装部署基础页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>

</body>
</html>

# 栅格系统

槽宽：30px

  1. 手机：范围 0-768px，宽度auto，左右两侧15px，栅格列数 12 列，前缀xs
  2. 平板：范围 768px-992px，宽度750px，容器居中，栅格列数 12 列，列宽：62.5，前缀sm
  3. 中等：范围 992px-1200px，宽度970px，容器居中，栅格列数 12 列，列宽：80.8，前缀md
  4. 大型：范围 1200px+，宽度1170px，容器居中，栅格列数 12 列，列宽：97.5，前缀lg

# 列偏移

语法

<div class="col-设备前缀-offset-列数">

例如

<div class="col-md-6 col-md-offset-3"></div>

# 列嵌套

<style>
span{
    display: block;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    background-color: #ccc;
    margin-bottom: 5px;
}
</style>
<div class="container">

    <div class="page-header">
        <h3>嵌套列演示</h3>
    </div>

    <div class="row">
        <div class="col-md-8">
            <!-- 嵌套列 -->
            <div class="row">
                <div class="col-md-2dot4">
                    <span>1</span>
                </div>
                <div class="col-md-2dot4">
                    <span>2</span>
                </div>
                <div class="col-md-2dot4">
                    <span>3</span>
                </div>
                <div class="col-md-2dot4">
                    <span>4</span>
                </div>
                <div class="col-md-2dot4">
                    <span>5</span>
                </div>
            </div>
            <!-- 嵌套列 -->
        </div>
        <div class="col-md-4">
            <span>联系电话</span>
        </div>

    </div>
</div>

# 响应式工具

# visible 可见

类名 手机 平板 中型 桌面
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见

# hidden 隐藏

类名 手机 平板 中型 桌面
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏

以下按钮只在手机上可见，而ul菜单只在手机上隐藏

<button class="visible-xs-inline-block">三</button>
<ul class="hidden-xs">
    <li>首页</li>
    <li>关于我们</li>
</ul>

# 全局 CSS 样式

# 引用

<blockquote>
    <p>无论你经历了怎样的苦难，总有一个人的出现，让你原谅上天对你所有的刁难。</p>
</blockquote>
<br>
<blockquote>
    <p>无论你经历了怎样的苦难，总有一个人的出现，让你原谅上天对你所有的刁难。</p>
    <footer>来自于 <cite title="Source Title">宫崎骏</cite></footer>
</blockquote>
<br>
<blockquote class="blockquote-reverse">
    <p>无论你经历了怎样的苦难，总有一个人的出现，让你原谅上天对你所有的刁难。</p>
    <footer>来自于 <cite title="Source Title">宫崎骏</cite></footer>
</blockquote>