<h2>Base_Card</h2>
<div class="card" style="width: 18rem;">
<img src="{% static 'app/image1.png' %}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<h2>Card-group</h2><br>
<div class="card-group">
<div class="card">
<img src="{% static 'app/image1.png' %}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="{% static 'app/image1.png' %}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="{% static 'app/image1.png' %}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="{% static 'app/image1.png' %}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<h2>Card-deck</h2><br>
<div class="card-deck">
<div class="card">
<img src="{% static 'app/image1.png' %}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="{% static 'app/image1.png' %}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="{% static 'app/image1.png' %}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="{% static 'app/image1.png' %}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<h2>Grid cards</h2>
<div class="row row-cols-1 row-cols-md-3">
# rowクラス内(行)に以下5個のcolクラス(列)を格納します。
# row-cols-1クラスで、スマホで表示時に各列が1列に表示されるようになります。
# row-cols-md-3クラスは、ブレークポイントが中サイズ(md)以上のデバイスにおいて、行内に表示するカラムの数を3つに設定します。
# 具体的には、row-cols-md-3クラスを使用すると、カラムが中サイズ以上のデバイス(通常は992ピクセル以上の画面幅)で3つのカラムが表示されます。ただし、中サイズ未満のデバイスではカラムの数は変化します。
<div class="col mb-4"> # colクラス:この要素をGrid systemのcol(列)に指定出来ます。
<div class="card h-100"> # cardクラス:この要素をGrid systemのcardに指定出来ます。
# h-100クラス:card要素の高さを100%表示します。
<img src="{% static 'app/image1.png' %}" class="card-img-top" alt="..." style="max-height: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="{% static 'app/image1.png' %}" class="card-img-top" alt="..." style="max-height: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="{% static 'app/image1.png' %}" class="card-img-top" alt="..." style="max-height: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="{% static 'app/image1.png' %}" class="card-img-top" alt="..." style="max-height: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="{% static 'app/image1.png' %}" class="card-img-top" alt="..." style="max-height: 10rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
class SignUpForm(UserCreationForm):
def __init__(self, *args, **kwargs):
super(SignUpForm, self).__init__(*args, **kwargs)
for field in self.fields.values():
field.widget.attrs["class"] = "form-control"
class Meta:
model = User
fields = "__all__"
<style>
.card-limit-height {
max-height: 15rem; /* 上限の高さを指定 */
overflow: hidden; /* 高さを超えたコンテンツの表示を制限 */
}
.card-img-limit-height{
max-height: 10rem; /* 上限の高さを指定 */
overflow: hidden; /* 高さを超えたコンテンツの表示を制限 */
}
</style>
<h2>Grid cards</h2><br>
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100 card-limit-height">
<img src="{% static 'app/image1.png' %}" class="card-img-top card-img-limit-height" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100 card-limit-height">
<img src="{% static 'app/image1.png' %}" class="card-img-top card-img-limit-height" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100 card-limit-height">
<img src="{% static 'app/image1.png' %}" class="card-img-top card-img-limit-height" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100 card-limit-height">
<img src="{% static 'app/image1.png' %}" class="card-img-top card-img-limit-height" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100 card-limit-height">
<img src="{% static 'app/image1.png' %}" class="card-img-top card-img-limit-height" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
コメント