bootstrap
11581 단어 Bootstrap
템플릿
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
기사(세세한 것이 쓰여 있다)
기본
그릿 시스템
<div class="container">で囲む
上記のcontainerクラスの中で<div class="row">で一行を定義する
上記のrowクラスの中で<div class="col-{prefix}-{列数(1〜12)}">で何分割するかを定義する
prefix는 가로폭
# styleを駆使してcssも
<div class="container" style="background-color:red; height:100px;">
<div class="row">
<div class="col-lg-6" style="background-color:blue;">
1(6/12)
</div>
<div class="col-lg-6" style="background-color:yellow;">
2(6/12)
</div>
</div>
</div>
bootstrap tutorial
# 構成はざっくりこんな感じ
ヘッダー
ナビゲーションバーがある
メイン
左1 右が2の比率で、構成されている
左がサイドバー的な感じで、右がメインコンテンツみたいな感じ
フッター
フッターはフッター。笑
上部のナビゲーションバーを持って来てもいいかもね
# メインの表現の方法
container
row # ここまでは普通
col-sm-4 # ここが左のコンテンツ領域
col-sm-8 # ここが右のコンテンツ領域
여기는 최소한의 클래스가 지금 몰랐기 때문에, 여러가지 놀아 본다
검증 1 간단하게 간단하게 이것이라면 직관적으로 걸지 말라고 생각하는 쓰는 방법
<ul class="navbar-nav bg-dark">
<h1>Navbar</h1>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
</ul>
안돼
검증 2
collapse를 넣어보세요
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<h1>Navbar</h1>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
</ul>
</div>
안돼
검증 화면에서 보면
display:none;が
.collapse:not(.show) {
display: none;
}
어른스럽게 처음부터 그려 주는 녀석으로. .
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a href="#" class="navbar-brand">Navbar</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
</ul>
</div>
</nav>
보충
ml-auto
<ul class="navbar-nav ml-auto">
세로 줄 또는 수평 줄
.nav-pills
문자는 분할 범위에서
그렇다면.
.text{
word-wrap: break-word;
}
.row.margin-top-20
.col-md-6
.row
.control-label.col-md-4
label = t(".reply_memo")
.col-md-8
= @course_order.reply_memo.content
bootstrap 부품
자주 사용하는 CSS
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
ml-auto
<ul class="navbar-nav ml-auto">
Reference
이 문제에 관하여(bootstrap), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tech-aki/items/b13c93f11e74e4f9fff2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)