Uygulamalar
Oyun
Yazılım
Yardım
Dota 2
LOL
Silkroad
WOT
Point Blank
Diğer
Yeni
Eski
Haber
Pazar
asp & .net
java
c# c++
python
php
Diğer
Windows
Donanım
Linux
Güvenlik
Program
Modeller
Destek
30-05-2017, Saat: 17:08
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:
staticdosyanın bulunduğu klasördür,
Kod:
filenamedosyanı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-Bootstrapile hızlı bir şekilde flask uygulamanıza bootstrap stilini katabilirsiniz.
Eklentiyi yüklemek için:
Kod:
$ pip install flask-bootstrapEklentiyi 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.htmlsayfası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-dangersı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.
