<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrap Practice</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container" style="padding:20px 0"> <div class="progress"> <div class="progress-bar progress-bar-primary" style="width:60%"></div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" style="width:60%"></div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" style="width:30%"></div> <div class="progress-bar progress-bar-primary" style="width:20%"></div> <div class="progress-bar progress-bar-warning" style="width:10%"></div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Bootstrap label, badge, alert, pannel
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrap Practice</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container" style="padding:20px 0"> <p>product a <span class="label label-primary">NEW!</span></p> <p>Inbox <span class="badge">5</span></p> <p>Inbox <span class="badge"></span></p> <div class="alert alert-info"> <button class="close" data-dismiss="alert">×</button> おしらせ </div> <div class="panel panel-primary"> <div class="panel-heading"> お知らせ </div> <div class="panel-body"> こんにちは! </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Bootstrap navbar レスポンシブル対応
トグルボタンを追加します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrap Practice</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target=".target"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="">Hello world</a> </div> <div class="collapse navbar-collapse target"> <ul class="nav navbar-nav"> <li class="active"><a href="">link1</a></li> <li><a href="">link2</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="">link3</a></li> </ul> </div> </nav> <div class="container" style="padding:20px 0"> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Bootstrap navbar
ヘッダー固定はnavbar-fixed-topのclassを追加します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrap Practice</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-brand" href="">Hello world</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="">link1</a></li> <li><a href="">link2</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="">link3</a></li> </ul> </nav> <div class="container" style="padding:20px 0"> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> <p>こんにちは</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
bootstrap パン屑、pagination、pager
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrap Practice</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container" style="padding:20px 0"> <ul class="breadcrumb"> <li><a href="">Home</a></li> <li><a href="">User</a></li> <li class="active">@walking</li> </ul> <ul class="pagination"> <li class="disabled"><a href="">«:</a></li> <li class="active"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">»:</a></li> </ul> <ul class="pager"> <li class="previous"><a href="">前へ</a></li> <li class="next"><a href="">次へ</a></li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Bootstrap dropdown menu
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrap Practice</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container" style="padding:20px 0"> <div class="btn-group"> <button class="btn btn-primary">Action </span> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="">Action</a></li> <li><a href="">Action</a></li> <li class="divider"></li> <li><a href="">Action</a></li> </ul> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Bootstrap Glyphicons
Bootstrapには標準で、アイコンやボタンが用意されています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrap Practice</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container" style="padding:20px 0"> <p><i class="glyphicon glyphicon-book">Book</i></p> <div class="btn-group"> <button class="btn btn-primary">Push Me!</button> <button class="btn btn-success">Push Me!</button> <button class="btn btn-info">Push Me!</button> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Bootstrap table装飾, form
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrap Practice</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container" style="padding:20px 0"> <table class="table table-striped table-bordered table-hover "> <thead> <tr> <th>ID</th><th>Score</th> </tr> </thead> <tbody> <tr><td>@yamada</td><td>200</td></tr> <tr><td>@sato</td><td>150</td></tr> <tr><td>@mori</td><td>230</td></tr> </tbody> </table> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrap Practice</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container" style="padding:20px 0"> <form class="form-horizontal" style="margin-bottom:15px"> <div class="form-group"> <label class="control-label col-sm-2" for="email">Email</label> <div class="col-sm-4"> <input type="text" id="email" class="form-control" placeholder="email"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-4"> <input type="submit" value="submit" class="btn btn-primary"> </div> </div> </form> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Bootstrap col-sm-6
bootstrapでは、横幅を12に区切って、区画を設定していきます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrap Practice</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div id="header" class="container" style="background-color:red;">header</div> <div class="container"> <div class="row"> <div class="col-sm-3 hidden-xs" style="background-color:gray;">side1</div> <div class="col-sm-6 col-xs-6" style="background:green;">Main</div> <div class="col-sm-3 col-xs-6" style="background:orange;">side2</div> </div> </div> <div id="footer" class="container" style="background: blue;">footer</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
CSSで吹き出しを作成
三角形はborderの組み合わせで作成します。また、オブジェクトを1px動かして、枠線を消すテクニックを使います。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS Layout practice</title> <link rel="stylesheet" href="normalize.css"> <!-- <link rel="stylesheet" href="reset.css"> --> <link rel="stylesheet" href="styles.css"> <style> body { padding: 0 10px 40px; } h2 { font-size: 16px; } .ex1 { width: 100px; height: 100px; background: #eee; } .ex2 { width: 100px; height: 100px; background: #eee; border-style: solid; border-width: 20px; border-color: red blue pink green; } .ex3 { width: 200px; height: 100px; background: #eee; border-radius:3px; position: relative; } .ex3:before { position: absolute; right: 20px; bottom: -20px; content: ''; width: 0: height: 0; border-style: solid; border-width: 10px; border-color: #eee transparent transparent transparent; } .ex4 { width: 200px; height: 100px; background: #eee; border-radius:3px; position: relative; } .ex4:before { position: absolute; right: 20px; bottom: -20px; content: ''; width: 0: height: 0; border-style: solid; border-width: 10px 20px 10px 0; border-color: #eee transparent transparent transparent; } .ex5 { width: 200px; height: 100px; border: 1px solid #eee; border-radius:3px; position: relative; } .ex5:before { position: absolute; right: 20px; bottom: -20px; content: ''; width: 0: height: 0; border-style: solid; border-width: 10px; border-color: #eee transparent transparent transparent; } .ex5:after { position: absolute; right: 20px; bottom: -19px; content: ''; width: 0: height: 0; border-style: solid; border-width: 10px; border-color: white transparent transparent transparent; } .ex6 { width: 200px; height: 100px; border: 1px solid #eee; border-radius:3px; position: relative; } .ex6:before { position: absolute; right: 20px; bottom: -20px; content: ''; width: 0: height: 0; border-style: solid; border-width: 10px 20px 10px 0; border-color: #eee transparent transparent transparent; } .ex6:after { position: absolute; right: 20px; bottom: -19px; content: ''; width: 0: height: 0; border-style: solid; border-width: 10px 20px 10px 0; border-color: #fff transparent transparent transparent; } </style> </head> <body> <h2>ex1</h2> <div class="ex1"></div> <h2>ex2</h2> <div class="ex2"></div> <h2>ex3</h2> <div class="ex3"></div> <h2>ex4</h2> <div class="ex4"></div> <h2>ex5</h2> <div class="ex5"></div> <h2>ex6</h2> <div class="ex6"></div> </body> </html>