Question

如何实现单页面应用程序布局，如在Bootstrap中附加图像？

注意： 只有容器才会替换任何操作。

Answer 1

这可能对你有所帮助！我不想劝阻你，所以回答这个问题。 但请下次请确保您阅读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>

Bootstrap单页面应用程序布局

1 个答案: