質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Q&A

解決済

1回答

373閲覧

Flask使用中におけるBootstrap Gridsystemの利用について

kgnmakl

総合スコア12

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

0グッド

0クリップ

投稿2023/04/28 10:19

編集2023/04/28 10:21

実現したいこと

Flaskを使用し、webアプリケーションの作成を行なっています。

前提

要素の共通化を行いbase.htmlの下にcreate.htmlのファイルを表示させています。その際に、create.html内でGridsystemを使用しましたが、反映されません。

発生している問題・エラーメッセージ

html

1{% extends "bootstrap/base.html" %} 2{% block title %}最終ページ{% endblock %} 3 4{% block content %} 5<div class="container text-right"> 6 <div class="row"> 7 <div class="col"> 8 Column 9 </div> 10 <div class="col"> 11 Column 12 </div> 13 <div class="col"> 14 Column 15 </div> 16 </div> 17</div> 18 19{% endblock %}

イメージ説明

Columnというテキストを横に並べたいです

試したこと

containerクラス内でtext-right, text-leftを使用し、create.html内にBootstrapが適用されていることは確認できました。
上記の

html

1<div class="container text-right"> 2 | 3</div>

はBootsrap公式サイトから引用しています。

補足情報(FW/ツールのバージョンなど)

visual studio codeを使用しています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

flask-bootstrapの話でしょうか?

また、もしかしてですが、pip install flask-bootstrapでインストールしましたか?

もし上記の通りだとしたら回答は簡単です。

flask-bootstrapのドキュメントによると、CDNのリンクを作成するとあります。
実際に作成されたHTMLを見てみると、以下でが追加されていることがわかります。

html

1<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

ご覧の通り、これはBootstrap 3のリンクです。

もう分かったと思いますが、質問文にある書き方は、現在bootstrpで検索すると出てくる書き方で、bootstrap5のものです。(4でもそうだったような気がしますが、今回の話題とは関係ないので割愛)

というわけで、bootstrap 3で横に並べたいのであれば、例えば以下の様に書く必要があります。(colってクラスは無かったはず。)

html

1{% extends "bootstrap/base.html" %} 2{% block title %}This is an example page{% endblock %} 3 4{% block navbar %} 5<div class="navbar navbar-fixed-top"> 6 <!-- ... --> 7</div> 8{% endblock %} 9 10{% block content %} 11<div class="container"> 12 <div class="row"> 13 <div class="col-md-4"> 14 Column 15 </div> 16 <div class="col-md-4"> 17 Column 18 </div> 19 <div class="col-md-4"> 20 Column 21 </div> 22 </div> 23</div> 24{% endblock %}

bootstrap 4 または bootstrap 5を使いたい場合は、bootstrap-flask 2.2.0というのがあるようです。

自分でBootstrapをダウンロードし、staticに配置して、base.htmlを作成して読み込んだ方が自由度が高いと考えているため、flask-bootstrapを使わない方が開発しやすいと思います。

投稿2023/05/01 14:15

FiroProchainezo

総合スコア2402

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問