Neler Öğreneceğim?
- Bootstrap Date Kodu
- Bootstrap URL Kodu
- Bootstrap Email Kodu
- Bootstrap Color Kodu
Gereksinimler
- Notepad++
Zorluk Düzeyi
- Intermediate (Orta Seviye)
English
Date Code
This code is the date tag as understood by name. It contains the year, month, and day data and allows you to choose whether to use the buttons on the right side as in other codes or to reset the data by using the crossed symbol.
The date code is used only for historical data, without extra time and minutes. As you can see, it consists of three parts. You can also select the date with the selection box.
URL Code
This code is a "type" class that you can use for boxes to add URLs as you can understand from the name. With this code, if you need to enter a URL in the user form, you can create a box with this form.
Email Code
It is used to write the e-mail information in the form which can be understood from the code name. It is a class you can use especially in forms such as membership form.
There is a very nice detail when I use this code, it is already the warning bubble that makes this code a special structure.
As we know, e-mail addresses are composed of two parts, one part is left of the @ sign and the other part is not the e-mail address without the right and the right part of the mark. If you do not have the right side of your e-mail address when you use this code, the warning bubble will appear on the screen.
Color Code
This code is known as the color code. The color code allows the user to select a color. So we can call it a kind of "color picker" code.
When the user clicks on the form box, a color selection box will come up, but when no action is taken, ie, when not clicked, the color is directly "black", but this color will change when the selection is made.
Türkçe
Date Kodu
Bu kod adından anlaşılacağı üzere tarih etiketidir. İçerisinde yıl, ay, gün verilerini barındırır ve diğer kodlarda olduğu gibi sağ kısımdaki butonları sayesinde seçim yapabilmeyi, ayrıca çarpı ikonu ile verileri sıfırlayabilmeyi sağlamaktadır.
Date kodu sadece tarihsel veriler için kullanılır, ekstra olarak saat ve dakikayı yapısında bulundurmaz. Görüldüğü gibi üç bölümden oluşur. Ayrıca seçim kutucuğu ile de tarih seçimi yapabilirsiniz.
Kodlarımız ise aşağıdaki gibidir:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form">
<br /><input type="date" class="form-control">
</form>
</div>
</body>
</html>
Type kısmına bu sefer "date" yazdık. Yani her zaman başlıkta yazmış olduğum etiketi "type" kısmına yazıyoruz.
Kodun çıktısı ise aşağıdaki gibi olacaktır:
Tarih eklemek istediğimiz zaman "gg" veya diğer yazlıarın üzerine tıklayıp sağ tarafta yer alan birinci butonu kullanarak tarihi geri veya ileri sararak seçim yapabilirsiniz.
En sağda yer alan bu buton sayesinde daha görsel bir seçim yapabiliriz. Seçim ekranı aşağldaki gibidir:
Tekrar hatırlatmak gerekirse bu seçim alanı işletim sisteminin diline bağlı olarak değişmektedir ve bununıa beraber öğreneceğimiz birçok kod işletim sistemine göre yapılanmaktadır. Aslında burdaki yapılanma HTML'e göre oluşmaktadır.
URL Kodu
Bu kod adından anlaşılacağı gibi URL eklemek için yapılan kutular için kullanabilecek bir "type" sınıfıdır. Bu kod sayesinde kullanıcı formunda URL girilmesi gerekli ise bu form ile kutuyu oluşturabilirsiniz.
Gerekli kodlarımız ise aşağıdaki gibidir:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form">
<br /><input type="url" class="form-control">
</form>
</div>
</body>
</html>
Type kısmına "url" yazdık.
Kodumuzun çıktısı ise aşağıdaki gibi olacaktır:
Görüldüğü gibi sağ tarafta ek butonlar yer almamaktadır. Çünkü sadece temel yazı mantığı ile çalışmaktadır.
Email Kodu
Kodumuz adından anlaşılacağı üzere formda yer alan e-mail bilgilerini yazmak için kullanılmaktadır. Özellikle üyelik formu gibi formlarda kullanabileceğiniz bir sınıftır.
Bu kodu kullanırken çok hoş bir detay var, zaten bu kodu özel bir yapı haline getiren o uyarı baloncuğu.
Bildiğimiz üzere e-mail adresleri iki kısımdan oluşur, bir kısım @ işaretinin solu diğer kısım ise işaretinin sağı ve sağ taraf olmadan e-mail adresi olmaz. Bu kodu kullanırken yazdığınız e-mail adresinin sağ tarafı yoksa ekrana uyarı baloncuğu gelecektir.
Kullanmak için gerekli kod aşağıdaki gibidir:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form">
<br /><input type="email" class="form-control">
</form>
</div>
</body>
</html>
Type kısmına "email" yazdık.
Kodun çıktısı ise aşağıdaki gibi olacaktır:
Uyarı panelinin çıktısı ise aşağıdaki gibidir:
Görüldüğü gibi e-mail adresinin sağ tarafı olmadığı için hata ekranı geldi.
Color Kodu
Bu kod renk kodu olarak bilinir. Color kodu sayesinde kullanıcı renk seçebilir. Yani bir nevi "color picker"kodu diyebiliriz.
Kullanıcı form kutusuna tıkladığı zaman karşısına bir renk seçim kutusu gelecektir fakat işlem yapılmadığında yani tıklanmamış olduğunda renk direkt olarak "siyah" geliyor, fakat bu renk seçim yapıldığında değişecektir.
Type kısmına "color" yazdık.
Gerekli olan kodlarımız aşağıdaki gibidir. Kodumuzun çıktısı aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Form</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<br />
<form class="form-inline" role="form">
<div class="form-group">
<input type="color" class="form-control" >
</div>
</form>
</div>
</body>
</html>
Görüldüğü gibi işlem yapılmadığı zaman ekranda siyah bir renk belirmiştir.
Seçim kutusuda aşağıdaki gibidir:
Bu kısımda görüldüğü gibi işletim sisteminde yer alan renk seçici gözüküyor, ben Windows kullandığım için böyle bir pencere geldi, siz eğer Linux veya
Mac OS kullanıyorsanız daha farklı bir panel karşınıza çıkacaktır. Ayrıca siz renk seçimi yaparken bile seçmekte olduğunuz renk kutuya yansıyacaktır.
Posted on Utopian.io - Rewarding Open Source Contributors