• Anasayfa
  • Hakkımızda
  • Etkinlikler
  • Destek Verin
  • Site Haritası
  • Giriş Yap
  • Üye Ol
  • Facebook
  • Twitter
  • RSS
Yazılım Dilleri
  • Soru - Cevap
  • EĞİTİM SETİ
  • KATEGORİ
  • DUYURU
  • TEKNOLOJİ HABERLERİ

Son Sorular

  • 23.04.2016 00:55:33C programlama 2 oyun
  • 20.04.2016 16:34:41Local Database
  • 15.04.2016 14:26:15Fatura kayıt işlemi
  • 21.03.2016 01:55:30C# problem

Popüler Sorular

  • 27.05.2012 05:49:50Asp.Net ile Date time alana veri ekleyemiiyorum ?
  • 2.04.2012 00:45:18.exe uzantılı dosya için dijital imza nerde nasıl alınır.
  • 12.05.2012 08:44:49Acil Yardım
  • 27.05.2012 13:46:51veri tabanı bağlantısı
  • .Net Framework
  • 8085 Assembly
  • Active Directory
  • ADO.NET
  • Android
  • Apple IOS
  • Arduino
  • ASP.NET
  • ASP.NET MVC
  • Blackberry
  • C#.Net
  • C++
  • CCG Framework
  • CISCO
  • CSS
  • Diğer
  • Dreamweaver
  • Entity Framework
  • Exchange Server
  • Gömülü Sistemler
  • GSM Programlama
  • Güncel
  • Güvenlik
  • HTML5
  • Java
  • Javascript / JQuery
  • Jira
  • Kariyer ve İş Yaşamı
  • LINQ
  • LibreOffice
  • Linux
  • Matlab
  • Microsoft Dynamics CRM
  • Mobil Uygulama Geliştirme
  • MySQL
  • NoSQL
  • Oracle
  • OWIN
  • PFSense
  • PHP
  • Powershell
  • Python
  • Sanallastirma
  • SAP-ABAP
  • SCOM 2012
  • SEO
  • Sharepoint 2010
  • Sharepoint 2013
  • Silverlight
  • Sistem Analiz ve Tasarımı
  • SQL Server
  • Symantec
  • TFS
  • T-SQL
  • Ubuntu
  • VB.NET
  • Veritabanı Yönetim Sistemleri
  • Visual Studio
  • VMware
  • WCF
  • Web Hosting
  • Windows 8
  • Windows Azure
  • Windows Phone 7.1
  • Windows Phone 8
  • Windows Server
  • Wordpress
  • WPF
  • Xamarin
  • XNA
  • Yazılım Mühendisliği
  • Yöneylem Araştırması
  • ASP.NET MVC
  • Entity Framework
  • Javascript / JQuery
  • LINQ
  • PHP

Son Duyurular

IPhone 6 ve IPhone 6 Plus Teknik Özellikleri ve Fiyatı

IPhone 6 ve IPhone 6 Plus Teknik Özellikleri ve Fiyatı

DELL'in Yeni Projesi: USB Bilgisayar (Project Ophelia)

DELL'in Yeni Projesi: USB Bilgisayar (Project Ophelia)

Windows Phone Youtube Uygulaması Google ve Microsoft ile Yeniden Yapılıyor

Windows Phone Youtube Uygulaması Google ve Microsoft ile Yeniden Yapılıyor

Android ve Apple IOS Telefonlar için Blackberry Messenger (BBM)

Android ve Apple IOS Telefonlar için Blackberry Messenger (BBM)

Nokia Lumia 925 Teknik Özellikleri, Lumia 928 ve 920 ile Karşılaştırması

Nokia Lumia 925 Teknik Özellikleri, Lumia 928 ve 920 ile Karşılaştırması

LG Optimus G Pro Özellikleri ve Gözle Video Oynatma Teknolojisi

LG Optimus G Pro Özellikleri ve Gözle Video Oynatma Teknolojisi

Twitter Bootstrap Nedir?

Şık, sezgisel ve güçlü bir front-end framework Twitter Bootstrap

06.12.2012

Yazar: Fettah KURTULUŞ (Google+)

Kategori: HTML5

3193

Twitter Bootstrap kendisini bize, hızlı ve kolay web geliştirme için şık, sezgisel ve güçlü bir front-end framework olarak tanıtıyor. Bootstrap kullanıma sunduğu css, javascript kütüphaneleri ve componentler ile vaadettiği yapıda web geliştirimini gerçekten oldukça kolaylaştırıyor. Daha önceki bir yazımda yazılımcıların neden framework kullanmaya ihtiyaçları olduğundan bahsetmiştim. Hatırlatmak gerekirse FW kullanımının en önemli nedeni ZAMANDAN TASARRUF ve TEMİZ ve ANLAŞILABİLİR kodlar yazmaktı. Bu FW bize gerçekten çok hızlı ve temiz bir şekilde frond-end kodlarımızı oluşturmamızı sağlıyor.

2.2.1 sürümü yayınlanan Bootstrap, scaffolding kategorisi altında grid, layout’lar ve mobil cihazları da kapsayan responsive design, Base CSS kategorisi altında tablo, form, buton, imaj ve icon dosyaları, Components kategorisi altında drop down menüler, etiket ve badges’ler, breadcrumbs, progress bars ve daha pek çok bileşen ve aracı kullanma imkanı sunuyor.

Peki bu araçları, özellikleri kullanabilmemiz için ne yapmamız gerekiyor? Sorunun cevabı öncelikle bu FW'yi indirip projemize dahil etmemiz gerekiyor. Bunun için http://twitter.github.com/bootstrap/index.html adresinde giderek buradan FW yi indirebiliriz. Bootstrap'ın sitesini biraz incelerseniz kütüphanenin sahip olduğu fonksiyonları çok basit ve düzgün bir şekilde yazmış olduğunu göreceksiniz yani dökümantasyonu gerçekten iyi. Çok fazla adaptasyon sorunu yaşamadan Bootstrap'ı kullanmaya başladığınızı farkedeceksiniz. Bootstrap için zannımca bu kadar yazmak yeterli artık kolları sıvayıp çalışabilirsiniz (çalışabiliriz) :).

Basit ama kullanışlı bir kaç bootstrap CSS özellikleri ile alakalı örnekler göstermek istiyorum. Diğer başlıklarla ilgili örnek bootstrap'ın resmi sitesinde yer alıyor inceleyebilirisiz.

1. Bootstrap ile açılır kutu oluşturmak.

Bu şekilde şık bir açılır kutu oluşturmak istediğimizi varsayalım, html kodlarını yazmamız gerekiyor, CSS kodlarını yazmamız ve javascript ile canlandırmamız gerekiyor normal şartlarda :). Bootstrap ile bu açılır kutu 3-5 satır kod ile hazır hale geliyor. Buyrun kodlar;

  1. <div class="btn-group">
  2. <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  3. <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  4. <ul class="dropdown-menu">
  5. <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
  6. <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
  7. <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
  8. <li class="divider"></li>
  9. <li><a href="#"><i class="i"></i> Make admin</a></li>
  10. </ul>
  11. </div>

Görüldüğü üzere biz sadece html kodlarımızı oluşturuyoruz ve Bootstrap' a ait class belirtiyoruz gerisini bootstrap hallediyor bizim için.

2. Menu List Oluşturmak

  1. <ul class="nav nav-list">
  2. <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  3. <li><a href="#"><i class="icon-book"></i> Library</a></li>
  4. <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  5. <li><a href="#"><i class="i"></i> Misc</a></li>
  6. </ul>

Tek yapmamız gereken HTML kodlarımızı oluşturmak ve bootstrap'ın bizim için hazırlamış olduğu css kütüphanesini kullanmak hepsi bu. Bu arada açılır kutu ve liste üzerinde gelen iconlar bootstrap kütüphanesi ile birlikte gelen iconlar. Yani harici hiç bir icon hazırlamanıza yada indirmenize gerek kalmıyor.

Bootstrap Icon-set

Herkese iyi çalışmalar

Fettah KURTULUŞ

Computer Engineer & Sr. Web Developer

Yazar Hakkında

Fettah KURTULUŞ

Fettah KURTULUŞ

www.fettahkurtulus.com

2008-2012 Lefke Avrupa Üniversitesi (Bilgisayar Mühendisliği) 2005-2007 Akdeniz Üniversitesi (Bilgisayar Tekn. ve Prog.)

Sosyal Medya

ORANLAR

  • 3193izleme

Arkadaşlarınla Paylaş

  • Tweet

0 Yorum

Yorum Yaz / Soru Sor

Lütfen yorum yazmak veya soru sormak için üye girişi yapınız.

Son Yorumlar

  • Hocam Link başka sayfaya yönlendiriyor.
  • merhaba benim merak ettiğim bir konu var y...
  • Merhaba download linki çalışmıyor. Rica et...
  • Nevzat Bey selamlar, Açıkçası bizler a...
  • Parametreleri Cache İşleminden Yalıtma kon...

En Güncel Sorular

  • Bilgilendirme maili (C#.Net)
  • Power Pivot (Sharepoint 2010)
  • BigInteger, BigDecimal (Asp.Net ve Asp.Net MVC)
  • visual C# ile asp nette veritabanı islemleri (Asp.Net ve Asp.Net MVC)
  • Share Point ile Dosya Arşiv Yönetim Sistemi yapılabilir mi ? (Sharepoint 2010)

En Son Cevap Verilen Sorular

  • Bilgilendirme maili
  • BigInteger, BigDecimal
  • visual C# ile asp nette veritabanı islemleri
  • Share Point ile Dosya Arşiv Yönetim Sistemi yapılabilir mi ?
  • txt dosyasına veri yazma

Twitter

Takip et: @yazilim_dilleri

En Çok Okunanlar

Elif BAYRAKDAR

C# ile SQL Server Bağlantısı, Insert, Update ve Delete Sorguları

23.05.2013

  • 120162
  • 0
Hakan Keskin

C# ile Windows Service Projesi Oluşturma, Debug Etme ve Setup Hazırlama

17.12.2013

  • 65285
  • 0
batuhan avlayan

Php - Mail Gönderme (İletişim Formu)

02.09.2013

  • 48397
  • 0

Sponsorlar

KODLAB
Pluralsight
Exchange server is
Office 365
YAZILIM DİLLERİ
Yukarı Çık
  • Hakkımızda
  • Facebook
  • Twitter
  • RSS

© Yazılım Dillerinin Buluşma Noktası | Kaynak belirtildiği sürece makaleler kopyalanabilir.
YazilimDilleri.Net sitesinde yer alan kullanıcıların oluşturduğu tüm içeriklerin yayınlanması ile ilgili yasal yükümlülükler içeriği oluşturan kullanıcıya aittir, YazilimDilleri.Net hiçbir şekilde sorumlu değildir.

Kapat

Giriş Yap

Kullanıcı Adı

Şifre

Şifremi Unuttum

KULLANICI GİRİŞİ