Bootstrap單頁應用程序佈局

-4

如何在Bootstrap中實現單頁應用程序佈局，如附加圖像？Bootstrap單頁應用程序佈局

注意：只有容器將取代任何行動。

2017-05-19 Sagar Bhosale

這可以幫助你！我不想阻止你，所以回答這個問題。 但請下一次，請您務必閱讀https://stackoverflow.com/help/how-to-ask

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Bootstrap 101 Template</title> 


<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
<style> 
// styles here 
body, html{ 
    height:100%; 
} 
.red{ 
    background: red; 
} 
.theheader{ 
    height: 50px; 
} 
.thecontainer{ 
    height:100%; 
} 
.h100{ 
    height: calc(100% - 50px); 
} 
.leftbar{ 
    background: green; 
    height:100%; 
} 
.rightbar{ 
    background: blue; 
    height:100%; 
}</style> 
    </head> 
    <body> 
    <div class="container-fluid thecontainer"> 
    <div class="row red theheader"> 
     <div class="col-md-12"> 
     Header here 
     </div> 
     </div> 

    <div class="row h100"> 
     <div class="col-md-3 leftbar"> 
     left side 
     </div> 
     <div class="col-md-9 rightbar"> 
      left side 
     </div> 
     </div> 
    </div> 

    </body> 
</html>

來源

2017-05-19 07:00:30 rrmerugu

是肯定的！謝謝 –

Bootstrap單頁應用程序佈局

回答

相關問題