ブートストラップ3を使用してこのページレイアウトを取得できますか？ブートストラップを使用したページレイアウト
ヘッダーは流体です。 ナビゲーションは幅250ピクセル、高さ100％です。コンテンツは残りの部分を占めます。
コンテンツに関しては、ブートストラップは素晴らしいです。しかし、私は、自分が望むようにページを分割するときに、望ましい結果を得るために奮闘しています。
ここに記載されているようにFlexboxに行くことができますが、私はIE10のサポートが必要です。Bootstrap 100% height with navbar
これは少しだけ調整してブートストラップで完全に行うことができますか、レイアウト用に別のファイルを使用する必要がありますか？
あなたは、ブートストラップを使用しますが、カスタムCSSファイルにすることができます以下のコード
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12" style="background-color:grey; text-align:center;">Header</div>
</div>
<div class="row" >
<div style="background-color:lightcyan; text-align:center;" class="col-xs-4 col-sm-4 col-lg-4">Navigation</div>
<div style="background-color:lightgrey; text-align:center;" class="col-xs-8 col-sm-8 col-lg-8">Content</div>
</div>
</body>
</html>を試してみてください。 example here
これは、ブートストラップデザインにリンクされたCSSファイルです。更新が非常に簡単になり、グローバルなレイアウトデザインとコンテンツデザインが明確に分離されます。
html, body {
margin : 0px;
width : 100%;
height : 100vh;
}
body .header {
width : 100%
height : 10vh;
background-color : #aaa;
}
body .flex-line {
display : flex;
}
body .nav {
width : 250px;
height : 100%;
background-color : #ccc;
}
body .content {
width : 100%;
height : 100%;
background-color : #eee;
}
p {
text-align : center;
font-family : Arial;
}<html>
<body>
<div class="header">
<p>Header</p>
</div>
<div class="flex-line">
<div class="nav">
<p>Navigation</p>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
</body>
</html>私はそれが参考になっことを願っています。
この結果を得る最も速い方法は、レイアウトにCSS別ファイルを使用することです。更新とクリーナーが簡単になります。 –