Less ile Bootstrap Etiketlerini Kullanmak

Less ile Bootstrap Etiketlerini Kullanmak

Öncelikle

www.getbootstrap.com adresinden Download Bootstrap butonuna tıklayarak dowloand sayfasına gelin burada Source code seçeneği tıklayarak dökümanı indirin, indirdiğiniz dökümandan less klasörünü alın ve bootstrap uygulayacağınız çalışma klasörünüzün içene atın.

İkinci aşama olarak

www.lesscss.org adresinden Get Less.js başlığı altında bulunan Browser dowloads seçeneklerinden Download source code linkini tıkladığınızda size less.js dosyasını indirecektir.

İndirdiğiniz  klasör içerisinde bulunan dist klasörü içerisinde less.min.js dosyasını, bootstrap tan indirdiğiniz less klasörü içerine atın.

Son aşamamız

www.winless.org adresinde bulunan winless programını download butonu yardımıyla indirin, indirdiğiniz programının kurulumunu yaptıktan sonra programı çalıştırın,

programın üst kısmında iki seçenek bulunmaktadır buradan Less Files seçeneğinin seçin  ve  sol alt kısmında bununan Add Folder seçeneğinden, daha önce bootstrap sayfasından indirmiş olduğunuz less klasörünü seçerek programa dahil edin.

Daha sonra dosyaların listelendiği kısmın üzerindeki File seçeneğinden eklemiş olduğumuz listenin tamamının işaretini kaldırıp sadece kullanacağınız bootstrap.less dosyasını işaretleyin, işaretledikten sonra sağ alt kısımda bulunan Compile butonuna basın, bu işlemi yaptıktan sonra programın sol üst kısmında bulunan Less Files sekmesi yanında Compiler sekmesini göreceksiniz bu sekmeye tıklayarak burada bulunan özelliklerden dosyanın yolunu ve son derleme zamanını görebilirsiniz.

Daha sonra bootstrap’ın sitesinden indirmiş olduğunuz bootstrap.less dosyasının bulunduğu klasörün içine baktığınızda size bootstrap.css diye bir dosya oluşturduğunu göreceksiniz bu dosya yolunu, üzerinde çalışma yapacağınız sayfanın üst kısmına ekleyin.  

örneğin less klasörü içerisinde var olan dosya yolumuzu bu şekilde ekleyeceksiniz.

 <link href="less/bootstrap.css" rel="stylesheet">   

Program açıkken örneğin variables.less dosyasında yapacağınız bütün yenilikleri bootstrap.css dosyasına atayacaktır, bu atamayı iki şekilde yapar,  bootstrap.css dosyası açık ise yenilikleri kaydetmek istediğinizi soracaktır,  bootstrap.css dosyası kapalı ise program kendiliğinden otomatik değişiklikleri kaydedecektir.

Çalışma sayfalarınızın üst kısmına bootstrapla ilgili yalnızca aşağıdaki kodu eklemeniz yeterlidir.

<link href="less/bootstrap.css" rel="stylesheet">   

En alt kısmına da bootstrapla ilgili aşağıdaki kodu eklemeniz yeterli olacaktır.

<script src="js/bootstrap.js"></script>

bootstrap less

JavaScript Kullanım Özellikleri

Bu yazımda JavaScript kullanım özelliklerine iki örnek vereceğim.

Birinci yöntem; javascript kodunu kullanacağınız elamana yazarak alacağınız sonuçtur.

aşağıda bulunan örnekte button elemanının onclick özelliğene “document.getElementById” ile bir id veriyoruz daha sonra “.innerHTML” ile html bir döküman ekliyoruz.
 son olarak button elemanına vermiş olduğumuz id ile kullanmak istediğimiz p etiketinin id eşleştiriyoruz.

<button type="button" onclick="document.getElementById('birinci').innerHTML = 'eleman ile deneme'">
eleman deneme </button>

<p id="birinci">eleman ile deneme sonucu buraya gelecek</p>

ikinci yöntem; javascript kodunu fonksiyon oluşturarak alacağınız sonuçtur. aşağıda bulunan örnekte fonsiyonun ismi “ikinci” button elemanının onclick özelliğine yazılarak, fonksiyonun yapacağı işlemler onclick özelliğine atıyoruz.
daha sonra fonksiyonumuzda bulunan “document.getElementById” id ile kullanmak istediğimiz p etiketinin id eşleştiriyoruz.

<script>
function ikinci() {
document.getElementById("ikincideneme").innerHTML = "fonksiyon ile deneme";
}
</script>

<button type="button" onclick="ikinci()"> fonksiyon deneme </button>
<p id="ikincideneme">fonksiyonun sonucu buraya gelecek</p>

Yukarıda bulunan iki örnek arasındaki fark; Javascrip kodunu fonksiyon olarak kullandığınızda, atamak istediğiniz elemana bütün kodları tekrar tekrar yazmak yerine sadece id isimlerini eşleştirerek kullanabilirsiniz, bu şekilde yapacağınız işlemleri daha düzenli ve daha hızlı bir şekilde yapmış olursunuz.

Çalışmalara ait örnek link

javascript

CorelDraw Arayüz Tanıtım, Video Ders

CorelDraw Arayüz Tanıtım

Bu videoda Coreldraw genel kullanım özellikleri, menülerin yerleşim ve genel kullanım özellikleri anlatılmıştır. Daha sonraki videolarda münüler ve araçlar hakkında detaylı anlatım yapılacaktır.

VİDEO DERSİ BURADAN İZLEYEBİLİRSİNİZ

CorelDRAW coreldraw arayüz

Responsive Template Çalışmam

html, jquery, booststrap, less  ile yapılmıştır.

TEMAYA AİT DEMOYU BURADAN GÖREBİLİRSİNİZ

tema template

Html5 Ses ve Video Ekleme

Html5 ile gelen ses ve video etiketlerine ait en önemli özellikler.

Sitenize ses dosyası eklemek
<audio> </audio>  ses dosyası etiketidir.

Ses dosyası yolunu göstermek
<source src=""></source> ses dosyası kaynağını belirtir.

Ses etiketini ekranda göstermek veya gizlemek
Controls : etiketi audio etiketine ait görüntünün ekranda görünmesini sağlar bu etiketi eklemeseniz de audio ses özelliği çalışacaktır fakat ekranda ses etiketine ait hiçbir görüntü bulunmayacaktır, buda arkaplanda çalan ses efekti gibi olacaktır.

Ses dosyasını otomatik başlatmak
Autoplay: etiketi audio etiketinin sayfaya yüklendiği an otomatik çalışmasını sağlar.

Sesin tekrar başlaması
Loop: yüklemiş olduğunuz ses dosyası bittikten sonra tekrar başlamasını sağlar.

Örnek :
<audio autoplay="" controls="">
<source src="”ses.mp3″"></source>
</audio>

Sitenize video dosyası eklemek
<video> </video>  video dosyası etiketidir.

Video dosyası yolunu göstermek
<source src=""></source> video dosyası kaynağını belirtir.

Video etiketini ekranda göstermek veya gizlemek
Controls : etiketi video etiketine ait çerçeve görüntüsünün ekranda görünmesini sağlar bu etiketi eklemeseniz de video görüntüsü ekranda çalışacaktır fakat video etiketine ait hiçbir görüntü bulunmayacaktır.

Ses dosyasını otomatik başlatmak
Autoplay: etiketi audio etiketinin sayfaya yüklendiği an otomatik çalışmasını sağlar.

Sesin tekrar başlaması
Loop: yüklemiş olduğunuz ses dosyası bittikten sonra tekrar başlamasını sağlar.

Video boyutlandırma
Width: videolarınızı kullanacağınız alana göre boyutlandırmanızı sağlar.

Örnek:
<video autoplay="" controls="" width="”400″">
<source src="”video.flv”"></source>
</video>

html html5 html5 ses ekleme html5 video ekleme

CSS Box (kutu) Modeli

css ile nasıl kutu modelleyebiliriz, şimdi size bundan bahsedeceğim.

Border: kenar çizgisi, bordere vereceğiniz değerler border kalınlığını belirler, border alabileceği değerler: kalınlık, çizgi şekli, renk. Konuyla ilgili detaylı bilgiyi border konusundan bakabilirsiniz.

Border: bütün kenarlara çizgi uygular.
Border-left: sol kenara çizgi uygular.
Border-right: sağ kenara çizgi uygular.
Border-top: üst kenara çizgi uygular.
Border-bottom: alt kenara çizgi uygular
border:10px 20px: üst ve alt çizgi kalınlığı10px, sağ ve sol çizgi kalınlığı 20px olacaktır.
Border:1px 0 5px 2px: üst çizgi kalınlığı 1px, sağ çizgi yok, alt çizgi kalınlığı 5px, sol çizgi kalınlığı 2px olacaktır. Tabi çizgi şekli ve kalınlığı atamayada unutmamak gerekiyor.

Width ve height: orta alan genişliğini belirler. Width değeri vermediğiniz durumlarda kutu o anki alanın boşluğunu kaplayacak kadar sağa doğru uzayacaktır. Height değerini vermediğinizde ise kutuya eklediğiniz içerik kadar yükseklik değeri alacaktır.

padding: orta alan ile kenar çizgisi arasındaki boşluğu belirler bu alana yazı veya resim gibi herhangi bir şey eklenemez, border için vereceğiniz değer width ve height değeri üzerine eklenir,
padding: bütün kenar boşlukları
padding-left: sol kenar boşluğu
padding-right: sağ kenar boşluğu
padding-top:üst kenar boşluğu
padding-bottom: alt kenar boşluğu
padding:10px 20px, üst ve altan 10px, sol ve sağdan 20 px boşluk verecektir
padding:1px 0 5px 2px, üsten 1px, sağda yok, alttan 5px, soldan 2px boşluk verecektir.

Margin: kenar çizgisi veya kenar çizgisi kullanılmayan durumlarda kenar sınırı ile kutu etrafında bulunan başka etiketlerle olan boşluğu belirler,
margin: bütün kenar boşlukları
margin-left: sol kenar boşluğu
margin-right: sağ kenar boşluğu
margin-top: üst kenar boşluğu
margin-bottom: alt kenar boğluğu
margin:10px 20px, üst ve altan 10px, sol ve sağdan 20 px boşluk verecektir
margin:1px 0 5px 2px, üsten 1px, sağda yok, alttan 5px, soldan 2px boşluk verecektir.

css kodu

.kutu {
background-color:yellow;
width: 100px;
padding: 50px;
border: 50px solid red;
margin: 50px;
}

html kodu

&lt;div class="kutu"&gt; kutu &lt;/br&gt; kutu &lt;/br&gt; kutu &lt;/br&gt; kutu &lt;/div&gt;


çalışmalara ait örnek link:

css css box modeli css kutu modeli