Twitch 流图像并仅在在线流上排序

Question

你好 JavaScripts 程序员！

在 stackoverflow 中，我得到了一个代码，谁显示 Twitch 流媒体，谁在线，谁不在线。 （代码：http://jsfiddle.net/LYv3R/5/）现在我想升级此代码，使用流图像和排序第一在线流媒体。例如：

默认代码结果：

streamer1 (Offline)
streamer2 (Offline)
streamer3 (Online)
streamer4 (Online)

但我想要这样的东西：

IMAGE streamer3 (Online)
IMAGE streamer4 (Online)
IMAGE streamer1 (Offline)
IMAGE streamer2 (Offline)

我不太了解 JavaScript，这就是为什么我想在那里寻求帮助的原因。

任何人都可以，请告诉我，这是如何工作的？

谢谢

Answer 1

您可以或需要添加很多东西来制作出色的 JavaScript 代码... 我可以告诉你的是把你所有的 javascript 代码改成这些例子：

---

示例一：

var hello = "hello";
/* This is an alternate method to creating javascript methods
function streamer(name, status, url) {
    this.name = name;
    this.status = status;
    this.url = url;
} */

// The streamer object
// here we will store the necessary information from 
// the twitch api json file
var Streamer = {
  id: 0,
  status: "title",
  name: "strimmah",
  display_name: "Strimmah",
  url: "https://secure.twitch.tv/freecodecamp", // test url
  previewImgs: ["large", "medium", "small", "template"],
  game: "GaM3",
  viewers: 0,

  init: function(name, status, game, url) {
    this.name = name;
    this.status = status;
    this.game = game;
    this.url = url;
  },
  init: function(name, status, game, viewers, url) {
    this.name = name;
    this.status = status;
    this.game = game;
    this.viewers = viewers;
    this.url = url;
  },

  initPreviewImgs: function(large, medium, small, template) {
    this.previewImgs[0] = large;
    this.previewImgs[1] = medium;
    this.previewImgs[2] = small;
    this.previewImgs[3] = template;

  }
};
// delete test variables
var test = Object.create(Streamer);
var backUpImage = "https://static-cdn.jtvnw.net/ttv-static/404_preview-640x360.jpg";
var tempStreamers = [
"nokss68", 
"snake606", 
"team_itxx_cod", 
"relapsegtv", 
"sokkaenpyjama", 
"elfepurpl3", 
"lighthund", 
"spacecakezed", 
"nagatsu6", 
"xng360", 
"nazenko", 
"giiskaa", 
"floki_live", 
"kayakox", 
"jejen64",
"spivix",
"keryg4n",
"mehdii95150",
"mrgeekyfr",
"zaykerz92",
"etsalutdit",
"x_dyn_x",
"martind32",
"el_fideo11",
"xmisticoxx",
"zookervinc78",
"MrCraaftt",
"killerelite84",
"Aqu0ss",
"panteleimon42",
"veynstream",
"le_salty_gamer"
];
var streamDisplayStatus = 1; // 0-ALL, 1-Online Only, 2-Offline only
var twitchURL = "https://secure.twitch.tv/"; // to create channel urls

var streamerArray = [];
var showOffline = true;
// ENTRY POINT, 
$(document).ready(function() {
  /*for (var i = 0; i < tempStreamers.length; i++) {
      loadStreamJsonInfo(tempStreamers[i], test);
  }*/
  // initial set of streamers, we start with Overview so show all
  instantiateStreamers();
  // navigator button setup
  navigationButtons();
});

function instantiateStreamers() {
  streamerArray.length = 0;
  for (var i = 0; i < tempStreamers.length; i++) {
    var streamer = Object.create(Streamer);
    loadStreamJsonInfo(tempStreamers[i], streamer);
  }
}

function loadStreamJsonInfo(name, data) {
  /*$.getJSON('https://api.twitch.tv/kraken/streams/freecodecamp?callback=?', function(json) {
      console.log(json);
  }); */
  $.getJSON('https://api.twitch.tv/kraken/streams/' + name + '?callback=?',
    function(json) {
      // console.log(json);
      var stream = json.stream;
      if (stream !== null) {
        var channel = json.stream.channel;
        data.init(channel.display_name, channel.status, channel.game, stream.viewers, channel.url);
        data.initPreviewImgs(stream.preview.large, stream.preview.medium, stream.preview.small, stream.preview.template);
        // console.log(data.name + " " + data.status + " " + data.viewers);
      } else {
        data.init(name, "Offline", "", 0, twitchURL + name)
        data.initPreviewImgs(backUpImage, backUpImage, backUpImage, backUpImage);
      }
      streamerArray.push(data);
      //console.log("TEST: " + streamerArray.length);

      checkDisplayStatus(data);
    }); // end of getJson
}

function checkDisplayStatus(data) {
  switch (streamDisplayStatus) {
    case 0:
      createStreamerDOMItem(data);
      break;
    case 1:
      if (data.status !== "Offline") {
        createStreamerDOMItem(data);
      }
      break;
    case 2:
      if (data.status === "Offline") {
        createStreamerDOMItem(data);
      }
      break;
    default:
      createStreamerDOMItem(data);
      console.log("Default switch");
      break;
  }
}

function createStreamerDOMItem(streamData) {
  var divStart = '<div class="streamer-container">';
  var divEnd = '</div></div>';
  var divStreamerItem = '<div class="streamer-item">' + '<a target="_blank" href="' + streamData.url +
    '"><iframe src="https://player.twitch.tv/?channel='+ streamData.name +'\" frameborder="0" scrolling="no" height="350" width="100%" /></a>' +
    '<p id="viewer-count"><font color="yellow">' + streamData.viewers + '&nbsp;personne(s) sur ' +
    '<a href=\"' + streamData.url + '\" id="streamer-link">' + streamData.name + '</a></p></font>' 
	+ '';
	
  var final = divStart + divStreamerItem + divEnd;
  $(final).appendTo(".live-channels-container");
}

function clearStreamerDOMItems() {

  $("div").remove(".streamer-container");
}

body {
  background-color: #141414;
  margin-left: 30px;
  margin-right: 30px;
}

/*
.title-header {
  margin-top: 35px;
  color: #CCCCCC;
}

.navbar-container {
  color: #CCCCCC;
}

.navbar-container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.navbar-container li {
  float: left;
  padding: 7px 7px;
  border-bottom: solid 1px #484848;
}

.navbar-container a {
  color: #CCCCCC;
  text-align: center;
  padding: 7px 1px;
  text-decoration: none;
}

.navbar-container a:hover {
  color: white;
}


To see which button on the navbar you clicked on

.active {
  color: #CCCCCC;
  border-bottom: solid 1px white;
}

.navbar-container .active:hover {
  color: #CCCCCC;
  text-decoration: underline;
}*/

.live-channels-container {
  color: #CCCCCC;
}

.streamer-container {
  display: inline-block;
  width: 35%;
  min-width: 150px;
  height: 150px;
  min-height: 50px;
  position: relative;
  margin: 15px 10px 5px 0px;
}

.streamer-item {
  margin: 0 auto;
  padding: 0px 0px 0px 30px;
}

.streamer-item img {
  width: 100%;
  min-width: 50px;
}

.streamer-item p {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#streamer-link,
a,
a:hover {
  color: white;
}

#viewer-count {
  font-size: 12px;
}

<style src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<style src="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<div>
  <div class="navbar-container">
  </div>
  <br>
  <div class="live-channels-container">
  </div>
  <!-- END OF STREAMER BOXES-->
</div>
<!-- main content container-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

示例二：

$(document).ready(function () {

    function callAPI () {

        var errQty = 0;
        var onQty = 0;
        var offQty = 0;
        var errors = [];
        var online = [];
        var offline = [];
        // format and insert 'xhr.response' in HTML
        function formatInHTML(streamJSON, channel) {
            var url = 'http://www.twitch.tv/' + channel;
            var connection, status, language, viewers, start, startTime, startDate, channelLogo, streamImg;
            var today = new Date();

            if (streamJSON.hasOwnProperty('stream')) {
                if (streamJSON.stream) { // if is streaming
                    connection = 'online';
                    status = streamJSON.stream.channel.status;
                    language = streamJSON.stream.channel.language.toUpperCase();
                    viewers = streamJSON.stream.viewers;
                    channelLogo = streamJSON.stream.channel.logo;
                    streamImg = streamJSON.stream.preview.large;
                    start = new Date(streamJSON.stream.channel.updated_at);
                    startTime = start.getHours() + ':' + start.getMinutes();
                    startDate = (start.getDate() == today.getDate() && start.getMonth() == today.getMonth()) ? 'today' : start.getDate() + '/' + start.getMonth() + '/' + start.getFullYear().slice(-2);

                    online.push('<a href="' + url + '" target="_blank"><div class="channel col-xs-12 col-sm-6 col-md-3">');
                    online.push('<div class="' + connection + ' "style="background-image: url(' + streamImg + ')">');
                    online.push('<div class="description">');
                    online.push('<img src="' + channelLogo + '" class="logo img-responsive img-circle" alt="' + channel + ' Logo">');
                    online.push('<p class="name text-center">' + channel + '<span class="language"> [' + language + ']</span></p>');
                    online.push('<p class="status text-center">' + status + '</span></p>');
                    online.push('<p class="viewers text-center">' + viewers + ' viewing</p>');
                    online.push('<p class="since text-center">Started: ' + startTime + ' (' + startDate + ')</p>');
                    online.push('</div> <!-- description -->');
                    online.push('</div> <!-- channel -->');
                    online.push('</div></a> <!-- col-xs-12 -->');
                    onQty++;
                } else { // if is offline
                    connection = 'offline';
                    offline.push('<a href="' + url + '" target="_blank"><div class="channel col-xs-12 col-sm-6 col-md-3">');
                    offline.push('<div class="' + connection + '">');
                    offline.push('<div class="description">');
                    offline.push('<p class="name text-center">' + channel + '</p>');
                    offline.push('<p class="status text-center">offline</p>');
                    offline.push('</div> <!-- description -->');
                    offline.push('</div> <!-- channel -->');
                    offline.push('</div></a> <!-- col-xs-12 -->');
                    offQty++;
                }
            }

            // outputs HTML when finish API requests
            if (onQty + offQty + errQty == channels.length) {
                document.getElementById('stream').innerHTML = online.join('') + offline.join('') + errors.join('');

                if (onQty > 0) {
                    document.getElementById('online-qty').innerHTML = 'Online: ' + onQty + ' | ';
                }

                if (offQty > 0) {
                    document.getElementById('offline-qty').innerHTML = 'Offline: ' + offQty;
                }

                if (errQty > 0) {
                    document.getElementById('error-qty').innerHTML = ' | Not Found: ' + errQty;
                }
            }
        }

        var channels = ["FreeCodeCamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "SuperGuitarBros", "AdrianneCurry", "Paulow3b", "esl_sc2", "OgamingSC2", "tr7k", "NWGamesBrasil", "s2AlineFaria", "NoExist12345"];
        // cals API for each channel in 'channels'
        channels.forEach(function (channel) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://api.twitch.tv/kraken/streams/' + channel, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) { // request DONE
                    if (xhr.status == 200) { // OK with request
                        formatInHTML(JSON.parse(xhr.response), channel);
                    } else { // page not found (xhr.status == 400)
                        errors.push('<div class="channel col-xs-12 col-sm-6 col-md-3">');
                        errors.push('<div class="error">');
                        errors.push('<div class="description">');
                        errors.push('<p class="name text-center">' + channel + '</p>');
                        errors.push('<p class="status text-center">Channel doesn\'t exist =/</p>');
                        errors.push('</div> <!-- description -->');
                        errors.push('</div> <!-- error -->');
                        errors.push('</div> <!-- channel -->');
                        errQty++;
                        formatInHTML('', channel);
                    }
                }
            };
            xhr.send();
        });
    }
    callAPI();
});

#twitch-logo {
    margin: 20px auto 0 auto;
    fill: #6441a5;
}

#qty {
    line-height: 2em;
}

.channel{
    margin-top: 20px;
}

.online {
    padding: 20px;
    background-size: cover;
}

.offline {
    color: #fff;
    background-image: url("http://static-cdn.jtvnw.net/previews-ttv/live_user_test_channel-640x360.jpg");
    background-size: cover;
    padding: 20px;
}

.error {
    background-color: black;
    padding: 20px;

}

.description{
    height: 260px;
    padding: 10px;
}

.online .description {
    color: rgb(200, 200, 200);
    background-color: rgba(0, 0, 0, 0.6);
}

.offline .description {
    color: rgb(39, 25, 65);
    background-color: rgba(190, 190, 190, 0.8);
}

.error .description {
    color: black;
    background-color: rgba(190, 190, 190, 0.8);

}

.description:hover{
    color: #fff;
    background-color: rgba(39, 25, 65, 0.7);
}


.logo{
    max-height: 70px;
    margin: 0 auto;
}

.name {
    line-height: 3;
}

a {
    text-decoration: none;
}

.name {
    font-weight: bold;
}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></style>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 text-center">
            <svg id="twitch-logo" aria-label="Twitch Logo" class="svg-logo_twitch" height="32px" role="img" version="1.1" viewBox="0 0 94 32" width="94px" x="0px" y="0px">
                <title>Twitch</title>
                <desc>Streamers</desc>
                <path clip-rule="evenodd" d="M88,5h-6V0h-9l-6,5h-5.5L59,7.5V5h-5V0H36v5H16l-5-5H0v22l5,5.25L14,32h6v-1.5l3,1.5h12l2-3l1,3h7v-3l3,3h8l0.5-3l2.5,3h10l3-3v3h4l3-3v3h7l7-6V10L88,5z M13,13H8v6h5v6H6l-4-4V2h6v5h5V13z M36,21.5L32.5,25H15V7h6v12h2V7h6v12h2V7h5V21.5z M44,25h-6V7h6V25z M44,5h-6V2h6V5z M57,13h-5v6h5v6h-7l-4-4V2h6v5h5V13z M72,13h-7v6h7v6h-9l-4-4V11l4-4h9V13z M91,25h-6V13h-5v12h-6V2h6v5h7l4,4V25z" fill-rule="evenodd"></path>
            </svg>
            <span>by <a href="http://raphaelfernandes.com" target="_blank">R4PH43L</a></span>
            <p id="qty"><span id="online-qty"></span><span id="offline-qty"></span><span id="error-qty"></span></p>
        </div> <!-- col-xs-12 -->
    </div> <!-- row -->
    <div id="stream" class="row">
    </div> <!-- strean -->
</div> <!-- container-fluid -->

示例三：

var streamers = ["freecodecamp", "muczaczoslive", "kubon_", "chubbysue", "raav92", "dejavi", "docgotgame", "arquel", "mrcomtruise", "richiix27", "storbeck", "haluc86", "dnku123", "salva_salwa", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff"],
  streamersString = "",
  isOnline = [],
  isOffline = [];
for (var i = 0; i < streamers.length; i++) {
  streamersString = streamersString + streamers[i] + ",";
}
// function substr(str){
//   return str.substrsing(0,str.length-1);
// }

// esl_csgo,haluc86,dnku123,salva_salwa
url = 'https://api.twitch.tv/kraken/streams?channel=' + streamersString;
$.ajax({
  type: "GET",
  url: url,
  contentType: "application/json; charset=utf-8",
  async: false,
  dataType: "jsonp",
  success: function(data) {
    console.log("scs");
    var streamData,
      channelData = [],
      preview = [],
      dispName = [],
      name = [],
      links = [],
      games = [],
      status = [],
      views = [],
      broadcasterLanguage = [],
      logo = [],
      emptyDiv = [],
      isHidden = true;

    streamData = data.streams;

    for (var i = 0; i < streamData.length; i++) {
      channelData[i] = data.streams[i]["channel"];
      links[i] = channelData[i]["url"];
      games[i] = streamData[i]["game"];
      preview[i] = streamData[i]["preview"]["large"];
      views[i] = streamData[i]["viewers"];
      broadcasterLanguage[i] = channelData[i]["broadcaster_language"];
      dispName[i] = channelData[i]["display_name"];
      name[i] = channelData[i]["name"];
      logo[i] = channelData[i]["logo"];
      status[i] = channelData[i]["status"];
      views[i] = channelData[i]["views"];
      isOnline[i] = name[i];

      $("#content").append(
        "<div class ='item clearfix online' >" +
        "<div class = 'logo col-xs-12 col-md-12'>" +
        "<a target='_blank' href=" + links[i] + ">" + "<img class ='img-circle img-thumbnail images pull-left' src =" + logo[i] + ">" + "</a>" +
        "<span class = 'name'>" + "<h1>" + dispName[i] + "<sup>" + "<span class = 'lang '>" + broadcasterLanguage[i] + "</span>" + "</sup>" + "</h1>" + "<div class = 'preview'>" + "<button style = 'outline: none; background: none; border: none' class = 'btn btn-default btn-sm click' id=" + "previewButton" + i + ">" + "Preview" + "</button>" + "</span>" +
        "</div>" +
        "<div class = 'more pull-right col-lg-10 col-xs-12'>" +
        "<span class = 'games'>" + "<strong>Game: </strong>" + "<em>" + games[i] + "</em>" + "</span>" +
        "<span class = 'status'>" + "<p class = 'desc'>" + status[i] + "</p>" + "</span>" +
        "<div class= 'previewImage' style = 'display: none; text-align: center' id=empty" + i + ">" + "<img  src=" + preview[i] + " id=" + "previewImage" + i + ">" + "</div>" +
        "</div>" +
        "</div>" + "<hr>"
      );

      //Adding event listeners and leaving only number
      $("#previewButton" + i).on("click", function(event) {
        var clickedElementId = event.target.id
        clickedElementId = clickedElementId.replace(/\D+/g, '');

        $("#empty" + clickedElementId).toggle("slow");

      });

    }
    isOffline = streamers;
    for (var i = 0; i < isOnline.length; i++) {
      for (var j = 0; j < streamers.length; j++) {
        if (isOnline[i] === streamers[j]) {
          isOffline[j] = "";
        }
      }
    }

    for (var i = 0; i < isOffline.length; i++) {
      if (isOffline[i] !== "") {
        $("#content").append(
          "<div class ='item clearfix offline' >" +
          "<h1 style = 'color: white' class = 'text-center'>" + "<img src=https://c1.staticflickr.com/7/6095/6851107174_631d916876_o.jpg class = 'img-circle img-thumbnail'>" + isOffline[i] + "</h1>" +
          "</div>"
        );
      }
    }
    // Showing online/offline elements
    $("#all").on("click", function() {
      $(".item").show(600);

    });
    $("#online").on("click", function() {
      $(".offline").slideUp(600);
      $(".online").show(600);

    });
    $("#offline").on("click", function() {
      $(".online").slideUp(600);
      $(".offline").show(600);
    });
  },
  error: function(error) {
    console.log(error);
  }
});

body,
html {
  background: url('http://moserworld.pl/Apps/twitch/b4.jpg');
  background-size: cover;
  background-position: center;
  height: 100%;
}

.container {
  background: white;
}


/*.box{
  border: 2px solid gray;
}*/

.images {
  width: 80px;
  margin-top: 5px;
  box-shadow: 0px -17px 16px -9px gold;
}

.item {
  border-radius: 20px;
  padding: 0;
  padding: 10px;
  background: repeating-linear-gradient( -55deg, #222, #222 10px, #333 10px, #333 20px);
  margin: 40px;
  border-top: none;
  box-shadow: 0px 13px 4px darkgrey;
}

.games {
  color: aliceblue;
}

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.name h1 {
  font-family: monospace;
  font-weight: initial;
  font-size: 25px;
  padding-left: 100px;
  font-style: initial;
  border: 2px outset gainsboro;
  border-top: none;
  border-left: none;
  margin-left: 41px;
  padding: 0px;
  background: -webkit-linear-gradient(90deg, rgb(103, 76, 193) 0%, rgb(90, 140, 250) 70%);
  background: -moz-linear-gradient(90deg, rgb(103, 76, 193) 0%, rgb(90, 140, 250) 70%);
  background: -o-linear-gradient(90deg, rgb(103, 76, 193) 0%, rgb(90, 140, 250) 70%);
  background: linear-gradient(90deg, rgb(103, 76, 193) 0%, rgb(90, 140, 250) 70%);
  height: 40px;
  padding-top: 10px;
  margin-bottom: 20px;
  line-height: 0.78;
  border-radius: 10px;
  padding-left: 50px;
}

.desc {
  font-size: 20px;
  font-family: -webkit-body;
  background: whitesmoke;
  border: 1px outset azure;
  border-top: none;
  border-left: none;
  width: 100%;
  margin-top: 10px;
  padding: 4px;
  padding-left: 30px;
}

.lang {
  font-size: 20px;
  padding: 5px;
}

.logo h1 {
  color: aliceblue;
}

.move {
  border: 5px solid gray;
  padding-top: 20px;
  padding-bottom: 30px;
}

.preview {
  margin-left: 40px;
  background: azure;
  width: 109px;
  margin-top: -20px;
  height: 25px;
  font-style: italic;
  border: 2px dashed gold;
  border-top: none;
}

.buttonClick {
  height: 25px;
  background: none;
  width: 67px;
  padding-left: 0px;
  padding: 0px;
  border: none;
  outline: none;
}

.red {
  border: 2px solid red;
}

.hide {
  height: 600px;
}

.previewImage img {
  border: 4px solid white;
  border-radius: 7px;
}

.offline h1 {
  float: left;
  color: #ddd;
  font-family: monospace;
}

.offline img {
  width: 120px;
  float: left;
}

footer {
  margin-top: 10px;
}

<html>

<head>
  <meta charset="utf-8">
  <title>Twitch Viewer</title>
  <link rel="stylesheet" href="master.css" media="screen" title="no title" charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" media="screen" title="no title" charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js" charset="utf-8"></script>
  <script src="sp.js" charset="utf-8"></script>
<style src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></style>
  </head>


  <body>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
        <a class="navbar-brand" href="#"><i style ="font-size: 30px" class="fa fa-twitch"></i> Viewer</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li id="all" class="active"><a href="#">All</a></li>
          <li><a id="online" href="#">Online</a></li>
          <li><a id="offline" href="#">Offline</a></li>

        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a target="_blank" href="http://www.moserworld.pl"><i class = "fa fa-home"></i></a></li>

          <li><a target="_blank" href="https://www.facebook.com/kamil.antropik"><i class="fa fa-facebook"></i></a></li>
          <li><a target="_blank" href="https://twitter.com/MoserDraws"><i class="fa fa-twitter"></i></a></li>
          <li><a target="_blank" href="https://www.instagram.com/mosermuz/"><i class = "fa fa-instagram"></i></a></li>

        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
  <div class="container">

    <div class="row">
      <div class="col-lg-12 move">

        <div id="content" class="col-lg-12 box">

        </div>

      </div>
    </div>


  </div>
  <footer class="container">Written and coded by &copy; <em>Kamil Antropik</em></footer>
  <script type="text/javascript">
  </script>
</body>

</html>

希望我能理解您的要求，如果有其他事情不要害羞，希望我能帮助您！