Merih Forum Programlama ve yazılım algoritmalar programlama python Flask Flask uygulamasında bootstrap kullanımı

  • 0 Oy - 0 Ortalama
  • 1
  • 2
  • 3
  • 4
  • 5
Flask uygulamasında bootstrap kullanımı

 
#1

Html sayfalarını tasarlarken css yoğun bir şekilde kullanılır. Html sayfaları tasarlarken css nasıl kullanılıyorsa flask için de aynı şekilde geçerlidir. Css dosyaları static dosyalar olduğundan flask bu dosyalar için "static" isminde bir klasöre bakar.
Kod:
#index.html
<!DOCTYPE html>
<html>
<head>
   <title></title>
   <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
   <div class="row">
       <input type="text" name="username" class="input">
   </div>
</body>
</html>

Şimdi de styles.css isminde bir dosya oluşturalım:
Kod:
#style.css
.row {
   border: 1px solid red;
}
.input{
   background: green;
}

Still dosyaları için kullanılan 
Kod:
<link>

 etiketinin href özelliğine eklenen 

Kod:
url_for()

 fonksiyonu parametre olarak aldığı 

Kod:
static

 dosyanın bulunduğu klasördür, 

Kod:
filename

 dosyanın ismidir. Eğer bu şekilde kullanmak istersen 

Kod:
<link rel="stylesheet" type="text/css" href="/static/styles.css">

 şeklindeki kullanımda mevcuttur.

Html sayfaları tasarlamışsanız illaki bootstrap'ı duymuşsunuzdur. Bootstrap kullanarak çok kısa sürede etkileyici html sayfaları oluşturabilirsiniz. 
Kod:
Flask-Bootstrap

 ile hızlı bir şekilde flask uygulamanıza bootstrap stilini katabilirsiniz.

Eklentiyi yüklemek için:
Kod:
$ pip install flask-bootstrap

Eklentiyi kullanmak için:
Kod:
from flask_bootstrap import Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)

Eklenti eklendikten sonra Bootstrap'ı html sayfalarınızda kullanabilirsiniz. Kullanmaya başlamadan önce bootstrapı kullanacağınız sayfanızı 
Kod:
bootstrap/base.html

 sayfasından türetmelisiniz:

Kod:
{% extends 'bootstrap/base.html' %}
<button type="" class="btn btn-danger">Send</button>

Html elementlerinize bootstrap stilini eklemek için elementin class özelliği bootstrap classının ismi yazılır. Örnekte 
Kod:
btn btn-danger

 sınıfını kullandık. Butonumuzun rengi kırmızı olacaktır. Daha fazla bilgi için bootstrap sayfasından sınıf isimlerini öğrenebilirsiniz.




Bul
Alıntı


Benzer Konular...
Konu: Yazar Cevaplar: Gösterim: Son Mesaj
  Flask ile örnek bir uygulama altyapısı efsane 1 2,665 30-05-2017, Saat: 18:14
Son Mesaj: dalaylama
  database migration, Flask-migrate eklentisi efsane 0 1,968 30-05-2017, Saat: 17:21
Son Mesaj: efsane
  Flask-sqlalchemy ile tablo oluşturma, tablolar arasında ilişki tanımlama efsane 0 2,200 30-05-2017, Saat: 17:19
Son Mesaj: efsane
  Flask-sqlalchemy eklentisi, sütun veri tipleri efsane 0 1,944 30-05-2017, Saat: 17:18
Son Mesaj: efsane
  flask uygulamasına veritabanı ekleme sqlalchemy, orm efsane 0 2,319 30-05-2017, Saat: 17:16
Son Mesaj: efsane

Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


Bu konuyu görüntüleyen kullanıcı(lar):
1 Ziyaretçi

   
Türkçe Çeviri: Emre KRMN, Kodlayanlar MyBB, © 2002-2022 MyBB Group.  



Merih Forum® bilgi paylaşım platformu. 2015-∞ Tüm hakları saklıdır.