第 1 章 Bootstrap 介绍

图片 1

正文转自PHP中文网。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 介绍</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <button class="btn btn-info">Bootstrap</button>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

压缩和未压缩的JS文件也是在dist目录下,我们自行下载。

3)安装生成工具

npm install -g gulp

图片 2

image

教师助教:弘孝皇帝恢

鉴于自家的下载效用无需包容IE浏览器,由此,直接使用了 a 成分下载,基于HTML5 download属性。

3、塑造代码

因为代码没办法直接使用,大家必要利用nodejs的npm模块实行营造

四.创办第二个页面 笔者们创制叁个 HTML5 的页面,并且将 Bootstrap 的为主文件引进,然后测量检验是还是不是正规展现。
//第一个 Bootstrap

上面是官方表示代码,笔者加上了更详细的注释:

1)先开发cmd命令行窗口(这里记得用右键展开以管理人身份运行),不然只怕运维会error

cd命令到放置代码的地点,笔者是放在D:codeflv.js-master上

图片 3

image

三.Bootstrap 结构 先是,想要驾驭 Boostrap 的文书档案构造,必要在官方网址先把它下载到本地。Bootstrap下载地址如下:
Bootstrap 下载地址: (选用坐蓐情况就能够,v3.3.4卡塔尔(قطر‎

引入JS

Flv.js

是 HTML5 Flash 录像(FLV)播放器,纯原生 JavaScript 开垦,未有动用 Flash。由 bilibili 网址开源。

(1卡塔尔.跨设备、跨浏览器
能够配合全数今世浏览器,包蕴相比诟病的 IE7、8。当然,本课程不再思忖 IE9 以下浏览器。
(2State of Qatar.响应式构造
不单能够支撑 PC 端的种种分辨率的呈现,还帮助移动端 PAD、手提式有线电话机等显示屏的响应式切换展现。
(3State of Qatar.提供的总总林林的零零件
Bootstrap 提供了实用性很强的机件,富含:导航、标签、工具条、开关等生龙活虎雨后玉兰片组件,方便开采者调用。
(4).内置 jQuery 插件
Bootstrap 提供了成都百货上千实用性的 jquery 插件,那个插件方便开荒者完结 Web 中种种健康特效。
(5).支持 HTML5、CSS3
HTML5 语义化标签和 CSS3 属性,都获得很好的支撑。
(6卡塔尔国.支持 LESS 动态样式
LESS 使用变量、嵌套、操作混合编码,编写越来越快、更灵敏的 CSS。它和 Bootstrap 能很好的十分开辟。

使用也超级轻便:

4)包装和纤维化JS放在dist文件夹里

gulp release

图片 4

image

然后D:codeflv.js-masterdist里就到底得到大家要求flv.js和flv.min.js代码了

flv.js压缩前代码

flv.min.js压缩后代码

图片 5

image

一.Bootstrap 概述 Bootstrap 是由 Twitter企业(全球最大的天涯论坛卡塔尔的两名本领程序猿研究开发的四个依据HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉精彩,可用来飞速、轻易地创设基于 PC 及活动端设备的 Web 页面需要。
二〇〇九 年 6 月,Facebook内部的程序猿为了消亡前端开垦任务中的协作统一难题。阅世各类方案后,Bootstrap 最后被鲜明下来,并于 2012 年 8 月发布。经过非常长日子的迭代进级,由最先的 CSS 驱动项目升高成为内置超多 JavaScript 插件和Logo的多效果与利益 Web 前端的开源框架。
Bootstrap 最为重大的豆蔻梢头部分就是它的响应式布局,通过这种布局能够相称 PC 端、PAD以至手提式有线电话机活动端的页面访问。

FileSaver.js特别强,不独有合作到IE10+,何况还帮忙大文件下载,Chrome浏览器下以致足以下载2GB大小的文本。

二、整合方案

代码DEMO-html页面

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>flv.js demo</title>

    <style>
        .mainContainer {
            display: block;
            width: 1024px;
            margin-left: auto;
            margin-right: auto;
        }

        .urlInput {
            display: block;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 8px;
            margin-bottom: 8px;
        }

        .centeredVideo {
            display: block;
            width: 100%;
            height: 576px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: auto;
        }

        .controls {
            display: block;
            width: 100%;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>

    <p class="mainContainer">
        <input name="urlinput" class="urlInput" type="text" value="http://localhost/Test/test1.mp4"/>
        <video name="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">
            Your browser is too old which doesn't support HTML5 video.
        </video>
        <br>
        <p class="controls">
            <button onclick="flv_load()">Load</button>
            <button onclick="flv_start()">Start</button>
            <button onclick="flv_pause()">Pause</button>
            <button onclick="flv_destroy()">Destroy</button>
            <input style="width:100px" type="text" name="seekpoint"/>
            <button onclick="flv_seekto()">SeekTo</button>
        </p>
    </p>

    <script src="flv.min.js?1.1.9"></script>

    <script>
        function flv_load() {
            console.log('isSupported: ' + flvjs.isSupported());
            var urlinput = document.getElementsByName('urlinput')[0];
            var xhr = new XMLHttpRequest();
            xhr.open('GET', urlinput.value, true);
            xhr.onload = function (e) {
                var player;
                var element = document.getElementsByName('videoElement')[0];
                if (typeof player !== "undefined") {
                    if (player != null) {
                        player.unload();
                        player.detachMediaElement();
                        player.destroy();
                        player = null;
                    }
                }

                player = flvjs.createPlayer({
                    type: 'mp4',
                    url: urlinput.value
                });
                player.attachMediaElement(element);
                player.load();
            }
            xhr.send();
        }

        function flv_start() {
            player.play();
        }

        function flv_pause() {
            player.pause();
        }

        function flv_destroy() {
            player.pause();
            player.unload();
            player.detachMediaElement();
            player.destroy();
            player = null;
        }

        function flv_seekto() {
            var input = document.getElementsByName('seekpoint')[0];
            player.currentTime = parseFloat(input.value);
        }

        function getUrlParam(key, defaultValue) {
            var pageUrl = window.location.search.substring(1);
            var pairs = pageUrl.split('&');
            for (var i = 0; i < pairs.length; i++) {
                var keyAndValue = pairs[i].split('=');
                if (keyAndValue[0] === key) {
                    return keyAndValue[1];
                }
            }
            return defaultValue;
        }

        var urlInputBox = document.getElementsByName('urlinput')[0];
        var url = decodeURIComponent(getUrlParam('src', urlInputBox.value));
        urlInputBox.value = url;

        document.addEventListener('DOMContentLoaded', function () {
            flv_load();
        });
    </script>

</body>

</html>

结果

图片 6

image

Ps:录制要放在服务器上,这里小编用的是Java Web项目,tomcat安排,录像找个岗位就能够了,主尽管难忘地点

二.Bootstrap 特点 Bootstrap 非常的红,得益于它足够实用的效用和特性。首要着力成效特色如下:

// data是个数组// 数组项结构 {id: "icon-xxx", svgHTML: "svg..."}var zip = new JSZip();data.forEach(function (obj) { // zip包里面不断塞svg文件 zip.file(obj.id + '.svg', obj.svgHTML);});// 生成zip文件并下载zip.generateAsync({ type: 'blob'}).then(function(content) { // 下载的文件名 var filename = key + '.zip'; // 创建隐藏的可下载链接 var eleLink = document.createElement('a'); eleLink.download = filename; eleLink.style.display = 'none'; // 下载内容转变成blob地址 eleLink.href = URL.createObjectURL(content); // 触发点击 document.body.appendChild(eleLink); eleLink.click(); // 然后移除 document.body.removeChild(eleLink);});

2)施行npm营造,这里是展开设置开荒条件的操作

npm install

等候实施完后,会现身下图

图片 7

image

D:codeflv.js-master会多出了三个node_modules文件夹

图片 8

image

要害分为三大亚湾原子核能发电站心目录:**css(样式)、js(脚本)、fonts(字体)**。 1.css 索引中有八个 css 后缀的文件,此中包蕴 min 字样的,是削减版本,经常选取这么些;不带有的归属尚未滑坡的,能够学习领悟css 代码的文本;而 map 后缀的公文则是css 源码映射表,在部分特定的浏览器工具中使用。
2.js 目录饱含八个文本,是未压缩和减少的 js 文件。
3.fonts 目录包蕴了不相同后缀的书体文件。

FileSaver.js项目地址是:

风姿罗曼蒂克、安插方案

  解压后,目录显示那样的布局:       bootstrap/
                              ├── css/
                              │├── bootstrap.css
                              │├── bootstrap.css.map
                              │├── bootstrap.min.css
                              │├── bootstrap-theme.css
                              │├── bootstrap-theme.css.map
                              │└── bootstrap-theme.min.css
                              ├── js/
                              │├── bootstrap.js
                              │└── bootstrap.min.js
                              └── fonts/
                                  ├── glyphicons-halflings-regular.eot
                                  ├── glyphicons-halflings-regular.svg
                                  ├── glyphicons-halflings-regular.ttf
                                  ├── glyphicons-halflings-regular.woff
                                  └── glyphicons-halflings-regular.woff2

返回列表