■
Bootstrapテーマなるものがありました。これはJavaで画面などを作成するときにはBorderLayoutとかのクラスで指定できるのですが、これと同じ様なものでした。
見た目はこんな感じです。
TOPとLEFT, RIGHTにサイドバー、そしてフッターがあります。
処理を実装したい自分としてはこの様なレイアウトがあるととても嬉しかったります。
そんなわけで、ちょっとこれを使用して何か作って見たいと思います。
自分のブログ関連のものにしたいと思っていますが、ついでなのでAngularJSも使用してウェブアプリっぽくしたいものです。
上のHTMLコード
<!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.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <style> /* Remove the navbar's default margin-bottom and rounded borders */ .navbar { margin-bottom: 0; border-radius: 0; } /* Set height of the grid so .sidenav can be 100% (adjust as needed) */ .row.content {height: 450px} /* Set gray background color and 100% height */ .sidenav { padding-top: 20px; background-color: #f1f1f1; height: 100%; } /* Set black background color, white text and some padding */ footer { background-color: #555; color: white; padding: 15px; } /* On small screens, set height to 'auto' for sidenav and grid */ @media screen and (max-width: 767px) { .sidenav { height: auto; padding: 15px; } .row.content {height:auto;} } </style> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Logo</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> <div class="container-fluid text-center"> <div class="row content"> <div class="col-sm-2 sidenav"> <p><a href="#">Link</a></p> <p><a href="#">Link</a></p> <p><a href="#">Link</a></p> </div> <div class="col-sm-8 text-left"> <h1>Welcome</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <hr> <h3>Test</h3> <p>Lorem ipsum...</p> </div> <div class="col-sm-2 sidenav"> <div class="well"> <p>ADS</p> </div> <div class="well"> <p>ADS</p> </div> </div> </div> </div> <footer class="container-fluid text-center"> <p>Footer Text</p> </footer> </body> </html>
長ったらしい感じですが、各領域にそれぞれのコンポーネントを入れてやれば細かいところは気にしなくてOKなのでとても楽ができるのです。
どんなものを作ろうか？只今思案中です。
簡単ですが、ここら辺で失礼します。
でわでわ。。。
