Bootstrap 4 alpha使ってみた
8914 ワード
src
読み込みするだけの場合
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
html例
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
パーツ設置
<!--Bootstrap４に必要なCSSとJavaScriptを読み込み-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<style>
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
.container {
width: @width;
.center-block();
}
</style>
<!--タブコンポーネントを使ってHTMLコーディング-->
<div>
<!--タブのボタン部分-->
<ul class="nav nav-tabs container">
<li class="nav-item col-md-5">
<a href="#tab1" class="nav-link bg-primary" data-toggle="tab">タブ1</a>
<li class="nav-item col-md-5">
<a href="#tab2" class="nav-link bg-primary" data-toggle="tab">タブ2</a>
</ul>
<!--タブのコンテンツ部分-->
<div class="tab-content">
<div id="tab1" class="tab-pane active" >
<img class="col-md-10" src="http://jsrun.it/assets/8/I/s/O/8IsOW.jpg">
</div>
<div id="tab2" class="tab-pane" >
<img class="col-md-10" src="http://jsrun.it/assets/6/6/k/e/66keT.jpg">
</div>
</div>
</div>
<div class="row">
<!--10列幅分のボックス-->
<div class="col-xs-10 bg-primary">10列</div>
</div>
<div class="row">
<!--7列幅分のボックス-->
<div class="col-xs-7 bg-success">7列</div>
<!--5列幅分のボックス-->
<div class="col-xs-5 bg-info">5列</div>
<div class="alert alert-success" role="alert">aa</div>
</div>
Author And Source
この問題について(Bootstrap 4 alpha使ってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/tukiyo3/items/92ad404c191ddd7d092d著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .