Visa alla webb-innehåll som virtuell verklighet (4 / 5 steg)
Steg 4: BootStap
Nu bör du har fått VR kommer men om du letar att lägga lite mer färg till din UI, dess nu tiden kan du göra det. Jag brukade bootstrap design UI.
<! DOCTYPE html >
< html lang = "sv" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-kompatibel" content = "Dvs = kanten" >
< meta namn = "vyport" content = "bredd = enhet-bredd, initial-skala = 1" >
< meta namn = "Beskrivning" content = "" >
< meta namn = "författare" content = "" >
< title > VR < / title >
< länka href="css/bootstrap.min.css" rel = "stylesheet" >
< länka href="jumbotron.css" rel = "stylesheet" >
< script src = "js/ie-emulering-lägen-warning.js" >< / script >
< / head >
< body >
< nav klass = "navbar navbar-inversen navbar-fast-top" >
< div class = "behållare" >
< div class = "navbar-huvud" >
< knappen typ = "knappen" class = "navbar-toggle kollapsade" data-växla = "Dölj" data-target = "#navbar" aria-utökade = "false" aria-kontroller = "navbar" >
< span class = "sr-bara" > Växla navigering < / span >
< span class = "ikon-bar" >< / span >
< span class = "ikon-bar" >< / span >
< span class = "ikon-bar" >< / span >
< / knapp >
< en klass = "navbar-märke" href="member.php" > HeliSmart < /a >
< / div >
< div id = "navbar" class = "navbar-kollapsen kollaps" >
< ul klass = "nav navbar-nav" >
< li klass = "aktiv" >< en href="blah.html" > VR verkligheten < /a >< /li >
< /li >
< /ul >
< / div >
< / div >
< / nav >
< div class = "jumbotron dolda-sm dolda-xs" style = "padding-botten: 200px;" >
< div class = "behållare" >
< h2 >< b > ledsen < /b >< / h2 >
< p > detta kan endast ses i den en < b > mobiltelefon < /b >, kontrollera att du har också har java-aktiverad. < /p >
< p >< b > kontakta U.S. < /b > om du tror att allt är fine. < /p >
< / div >
< / div >
< div class = "jumbotron dolda-md dolda-lg" style = "padding-botten: 200px;" >
< div class = "behållare" >
< h2 >< b > fungerar bäst i en VR viewer. < /b >< / h2 >
< div class = "behållare" >
< div id = "loginbox" style = "marginal-top: 50px;" class = "mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2" >
< div class = "panel-panel-info" >
< div class = "panel-rubrik" >
< div class = "panel-titel" > Ange Video Url < / div >
< / div >
< div stil = "padding-top: 30px" class = "panel-kropp" >
< div stil = "Visa: ingen" id = "login-alert" class = "varna alert-fara col-sm-12" >< / div >
< div stil = "marginal-botten: 25px" class = "input-grupp" >
< span class = "input-grupp-addon" >< i klass = "glyphicon glyphicon-användare" >< /i >< / span >
< input type = "text" klass = "form-kontroll" id = "url" value = "" platshållare = "URL" >
< / div >
< / div >
< en href = "#" class = "btn btn-framgång" onclick="sparkSetPos()" Style = "marginal: 15px; marginal-top: 0px;" > ansluta < /a >
< / div >
< / div >
< / div >
< / div >
< iframe-id = "bildruta1" src = "#" width = "49%" höjd = "100%" style = "marginal: none;" >< / iframe >
< iframe-id = "bildruta2" src = "#" width = "50%" höjd = "100%" id = "rätt" >< / iframe >
< script type = "text/javascript" >
funktion sparkSetPos(obj) {
document.getElementById("frame1").src = document.getElementById ("url") .value;
document.getElementById("frame2").src = document.getElementById ("url") .value;
}
< / script >
< sidfot >
< p > © LameFreaks 2015 < /p >
< / sidfot >
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" >< / script >
< script src="dist/js/bootstrap.min.js" >< / script >
< script src = "js/ie10-vyport-bugg-workaround.js" >< / script >
< / body >
< / html >< br >