Etiam porta sem maleuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac conectetur ac, vestibulum ve eros.
Bootstrap, web uygulamalarının ve sitelerin geliştirilmesini başlatmak için tasarlanmış bir Twitter araç takımıdır.
Tipografi, formlar, düğmeler, tablolar, ızgaralar, gezinme ve daha fazlası için temel CSS ve HTML içerir.
Nerd uyarısı: Bootstrap, Less ile oluşturulmuştur ve modern tarayıcılar düşünülerek kapıdan dışarı çalışmak üzere tasarlanmıştır.
En hızlı ve en kolay başlangıç için bu pasajı web sayfanıza kopyalamanız yeterlidir.
Daha Az kullanma hayranı mısınız? Sorun değil, sadece depoyu klonlayın ve şu satırları ekleyin:
Github'daki resmi Bootstrap deposuyla indirme, çatallama, çekme, dosya sorunları ve daha fazlasını yapın.
Twitter'ın ilk günlerinde mühendisler, ön uç gereksinimlerini karşılamak için aşina oldukları hemen hemen tüm kitaplıkları kullandılar. Bootstrap, Twitter'ın ilk Hackweek'inde sunulan ve geliştirme hızla hızlanan zorluklara bir yanıt olarak başladı.
Twitter'daki birçok mühendisin yardımı ve geri bildirimi ile Bootstrap, yalnızca temel stilleri değil, aynı zamanda daha zarif ve dayanıklı ön uç tasarım modellerini de kapsayacak şekilde önemli ölçüde büyüdü.
Daha fazlasını dev.twitter.com'da okuyun ›
Bootstrap, Chrome, Safari, Internet Explorer ve Firefox gibi büyük modern tarayıcılarda test edilmiş ve desteklenmiştir.
Bootstrap, derlenmiş CSS, derlenmemiş ve örnek şablonlarla birlikte gelir.
Bootstrap'in bir parçası olarak sağlanan varsayılan ızgara sistemi, 940 piksel genişliğinde 16 sütunlu bir ızgaradır. Bu, popüler 960 ızgara sisteminin bir çeşididir, ancak sol ve sağ taraflarda ek kenar boşluğu/dolgusu yoktur.
Burada gösterildiği gibi, her biri ızgara sistemimizin bir parçası olarak tanımladığımız 16 temel sütunu kapsayan iki "sütun" ile temel bir düzen oluşturulabilir. Daha fazla varyasyon için aşağıdaki örneklere bakın.
- <div sınıfı = "satır" >
- <div sınıfı = "span6 sütunları" >
- ...
- </div>
- <div sınıfı = "span10 sütun" >
- ...
- </div>
- </div>
Hemen hemen her site veya sayfa için temel 940 piksel genişliğinde, ortalanmış bir kapsayıcı düzeni.
- <body>
- <div sınıfı = "konteyner" >
- ...
- </div>
- </body>
Minimum ve maksimum genişliklere ve sol kenar çubuğuna sahip esnek bir akışkan veya sıvı sayfa yapısı. Uygulamalar için harika.
- <body>
- <div sınıfı = "konteyner-akışkan" >
- <div sınıfı = "kenar çubuğu" >
- ...
- </div>
- <div class = "içerik" >
- ...
- </div>
- </div>
- </body>
Web sayfalarınızı yapılandırmak için standart bir tipografik hiyerarşi.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ve magnis doğumdan uzak montes, nascetur ridiculus mus. Nullam kimliği dolor kimliği nibh ultricies vehicula ut id elit.
Vurgu, adres ve kısaltma kullanma
<strong>
<em>
<address>
<abbr>
Vurgu etiketleri ( <strong>
ve <em>
), bir kelimenin veya ifadenin çevresindeki kopyaya göre ek önemini veya vurgusunu belirtmek için kullanılmalıdır. <strong>
Önem ve stres vurgusu <em>
için kullanın .
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae seçkin libero, bir pharetra augue.
Not:<b>
HTML5'te ve etiketlerini kullanmak hala sorun <i>
değil, ancak artık doğal stillerle gelmiyorlar. çoğunlukla ses, teknik terimler vb <b>
.<i>
Öğe, en <address>
yakın atasının veya işin tüm gövdesinin iletişim bilgileri için kullanılır. İşte nasıl göründüğü:
Not: Bir içindeki her satır , içeriği düzgün bir şekilde yapılandırmak için <address>
bir satır sonu ( <br />
) ile bitmeli veya blok düzeyinde bir etiketle (örneğin, ) sarılmalıdır .<p>
Kısaltmalar ve kısaltmalar için ( HTML5'te kullanımdan kaldırılmıştır ) <abbr>
etiketini kullanın . Steno formunu etiketin içine koyun ve tam ad için bir başlık belirleyin.<acronym>
<blockquote>
<p>
<small>
<blockquote>
Bir blok alıntı eklemek için etrafına sarın <p>
ve <small>
etiketler. Kaynağınızı belirtmek için öğeyi kullanın <small>
ve ondan önce bir uzun tire göreceksiniz —
.
Lorem ipsum dolor sit amet, conectetur adipiscing elit. Tamsayı pozu, bir ante venenatis dapibus pozu velit aliquet dönemi.
Dr.Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Tablolar harika - birçok şey için. Ancak harika tablolar, kullanışlı, ölçeklenebilir ve okunabilir (kod düzeyinde) olmak için biraz biçimlendirme sevgisine ihtiyaç duyar. İşte size yardımcı olacak birkaç ipucu.
Sütun başlıklarınızı her zaman <thead>
hiyerarşi <thead>
> <tr>
> olacak şekilde sarın <th>
.
Sütun başlıklarına benzer şekilde, tüm tablonuzun gövde içeriği <tbody>
, hiyerarşiniz <tbody>
> <tr>
> olacak şekilde sarılmalıdır <td>
.
Tüm tablolar, okunabilirliği sağlamak ve yapıyı korumak için yalnızca temel sınırlarla otomatik olarak biçimlendirilecektir. Ekstra sınıflar veya nitelikler eklemeye gerek yok.
# | İlk adı | Soy isim | Dil |
---|---|---|---|
1 | Bazı | Bir | ingilizce |
2 | Joe | altılı paket | ingilizce |
3 | Stu | göçük | kod |
- <tablo sınıfı = "ortak tablo" >
- ...
- </tablo>
Zebra çizgileri ekleyerek masalarınızda biraz süslü olun - sadece .zebra-striped
sınıfı ekleyin.
# | İlk adı | Soy isim | Dil |
---|---|---|---|
1 | Bazı | Bir | ingilizce |
2 | Joe | altılı paket | ingilizce |
3 | Stu | göçük | kod |
Not: Zebra şeritleme, IE8 ve altı gibi eski tarayıcılarda mevcut olmayan aşamalı bir geliştirmedir.
- <tablo sınıfı = "ortak masa zebra çizgili" >
- ...
- </tablo>
Önceki örneği alarak, jQuery ve Tablesorter eklentisi aracılığıyla sıralama işlevi sağlayarak tablolarımızın kullanışlılığını iyileştiriyoruz . Sıralamayı değiştirmek için herhangi bir sütunun başlığına tıklayın.
# | İlk adı | Soy isim | Dil |
---|---|---|---|
1 | Senin | Bir | ingilizce |
2 | Joe | altılı paket | ingilizce |
3 | Stu | göçük | kod |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <komut dosyası >
- $ ( işlev () {
- $ ( "tablo#sortTableÖrnek" ). tablo sıralayıcı ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <tablo sınıfı = "ortak masa zebra çizgili" >
- ...
- </tablo>
Tüm formlara, okunabilir ve ölçeklenebilir bir şekilde sunmak için varsayılan stiller verilir. Metin girişleri, seçim listeleri, metin alanları, radyo düğmeleri ve onay kutuları ve düğmeler için stiller sağlanmıştır.
Formunuzun .form-stacked
HTML'sine ekleyin, etiketlerin solları yerine alanlarının üstünde olacak. Bu, formlarınız kısaysa veya daha ağır formlar için iki sütun girdiniz varsa harika çalışır.
Bir kural olarak, nesneler için bağlantılar kullanılırken eylemler için düğmeler kullanılır. Örneğin, "İndir" bir düğme ve "son etkinlik" bir bağlantı olabilir.
Tüm düğmeler varsayılan olarak açık gri bir stile sahiptir, ancak mavi bir .primary
sınıf mevcuttur. Ayrıca, kendi stillerinizi yuvarlamak çok kolay.
Düğme stilleri, uygulanmış olan her şeye .btn
uygulanabilir. <a>
Genellikle bunları yalnızca , öğelerine uygulamak <button>
ve öğeleri seçmek isteyeceksiniz <input>
. İşte nasıl göründüğü:
Daha büyük veya daha küçük düğmeler mi istiyorsunuz? ye!
Etkin olmayan veya uygulama tarafından şu veya bu nedenle devre dışı bırakılan düğmeler için devre dışı durumunu kullanın. Bu .disabled
bağlantılar ve öğeler :disabled
için .<button>
Bir eylemin başarısızlığını, olası başarısızlığını veya başarısını vurgulayan tek satırlık mesajlar. Özellikle formlar için kullanışlıdır.
Biraz açıklama gerektiren mesajlar için paragraf stili uyarılarımız var. Bunlar, daha uzun hata mesajları vermek, kullanıcıyı bekleyen bir eylem konusunda uyarmak veya yalnızca sayfada daha fazla vurgu için bilgi sunmak için mükemmeldir.
Kipler (diyaloglar veya ışık kutuları) arka plan bağlamının korunmasının önemli olduğu durumlarda bağlamsal eylemler için mükemmeldir.
Güzel bir vücut…
Twipsi'ler, kafası karışmış bir kullanıcıya yardım etmek ve onları doğru yöne yönlendirmek için çok kullanışlıdır.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam volup. Voluptasdicta eaque beatae aperiam ut enim voluptatem açıklanm a, voluptas quia odit fugit accusantium totam totam mimarı açıkla, tam yarı fugit fugit, totam doloremque unde sunt sted quae quae t e m e d e m e d e r m e m e d e d e n m u u u m u u l u m u l u m u l u m u d u u n m u l u m u l u m u l u m u u l u m u u n m u l u m u l u m u u n m u l u m u l u m u u l a r m ı ı ı m ı s ı n m u d u m u .
Düzeni etkilemeden bir sayfaya alt metin bilgisi sağlamak için açılır pencereleri kullanın.
Etiam porta sem maleuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac conectetur ac, vestibulum ve eros.
Bootstrap, daha hızlı ve daha kolay web geliştirme için bir CSS ön işlemcisi olan Less ile birlikte kullanılacak açık kaynaklı bir karışım ve değişken paketi olan Preboot ile oluşturulmuştur.
Bootstrap'te Preboot'u nasıl kullandığımızı ve bir sonraki projenizde Less'i çalıştırmayı seçerseniz bundan nasıl yararlanabileceğinizi kontrol edin.
Tarayıcınızda javascript aracılığıyla Bootstrap'in Less değişkenleri, karışımları ve CSS'deki yerleştirme özelliklerini tam olarak kullanmak için bu seçeneği kullanın.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "tümü" />
- <script src = "js/less-1.0.41.min.js" ></script>
.js çözümünü hissetmiyor musunuz? Daha az Mac uygulamasını deneyin veya kodunuzu dağıtırken derlemek için Node.js'yi kullanın.
Bootstrap'ın bir parçası olarak Twitter Bootstrap'a dahil edilenlerden bazı önemli noktaları burada bulabilirsiniz. İndirmek ve daha fazlasını öğrenmek için Bootstrap web sitesine veya Github proje sayfasına gidin.
Less'teki Değişkenler, CSS baş ağrınızı ücretsiz olarak sürdürmek ve güncellemek için mükemmeldir. Bir renk değerini veya sık kullanılan bir değeri değiştirmek istediğinizde, tek bir noktada güncelleyin ve hazırsınız.
- // Bağlantılar
- @linkColor : #8b59c2;
- @linkColorHover : koyulaştır ( @linkColor , 10 );
- // Griler
- @siyah : #000;
- @grayDark : aydınlat ( @siyah , % 25 );
- @gray : aydınlat ( @siyah , % 50 );
- @grayLight : aydınlat ( @siyah , % 70 );
- @grayLighter : aydınlat ( @siyah , % 90 );
- @beyaz : #fff;
- // Vurgu Renkleri
- @mavi : #08b5fb;
- @yeşil : # 46a546 ;
- @kırmızı : # 9d261d ;
- @sarı : # ffc40d ;
- @turuncu : #f89406;
- @pembe : #c3325f;
- @mor : #7a43b6;
- // Temel
- @temel : 20 piksel ;
/* ... */
Less, CSS'nin normal sözdizimine ek olarak başka bir yorum stili de sağlar .
- // Bu bir yorumdur
- /* Bu da bir yorum */
Mixins, temel olarak CSS için içerir veya kısmidir ve bir kod bloğunu tek bir blokta birleştirmenize izin verir. box-shadow
Tarayıcılar arası geçişler, yazı tipi yığınları ve daha fazlası gibi satıcı önekli özellikleri için harikadırlar . Aşağıda Bootstrap ile birlikte gelen karışımların bir örneği verilmiştir.
- #yazı tipi {
- . steno ( @ağırlık : normal , @size : 14px , @lineHeight : 20px ) {
- yazı tipi boyutu : @size ;
- yazı tipi - ağırlığı : @ ağırlık ;
- satır yüksekliği : @lineHeight ; _
- }
- . sans - serif ( @ağırlık : normal , @boyut : 14 piksel , @lineHeight : 20 piksel ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- yazı tipi boyutu : @size ;
- yazı tipi - ağırlığı : @ ağırlık ;
- satır yüksekliği : @lineHeight ; _
- }
- . serif ( @ağırlık : normal , @boyut : 14 piksel , @lineHeight : 20 piksel ) {
- font - family : "Gürcistan" , Times New Roman , Times , sans - serif ;
- yazı tipi boyutu : @size ;
- yazı tipi - ağırlığı : @ ağırlık ;
- satır yüksekliği : @lineHeight ; _
- }
- . monospace ( @ağırlık : normal , @size : 12px , @lineHeight : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- yazı tipi boyutu : @size ;
- yazı tipi - ağırlığı : @ ağırlık ;
- satır yüksekliği : @lineHeight ; _
- }
- }
- #gradyan {
- . yatay ( @startColor : #555, @endColor: #333) {
- arkaplan - renk : @endColor ;
- arka plan - tekrar et : tekrar et - x ;
- arka plan - görüntü : - khtml - gradyan ( doğrusal , sol üst , sağ üst , ( @startColor ), ile ( @endColor ) ); // Konqueror
- arka plan - görüntü : - moz - doğrusal - gradyan ( sol , @startColor , @endColor ); // FF 3.6+
- arka plan - görüntü : - ms - doğrusal - gradyan ( sol , @startColor , @endColor ); // IE10
- arka plan - görüntü : - webkit - gradyan ( doğrusal , sol üst , sağ üst , renk - durdurma ( % 0 , @startColor ), renk - durdurma ( % 100 , @endColor )); // Safari 4+, Chrome 2+
- arka plan - görüntü : - webkit - doğrusal - gradyan ( sol , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- arka plan - görüntü : - o - doğrusal - gradyan ( sol , @startColor , @endColor ); // Opera 11.10
- - ms - filtre : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE6 & IE7
- background-image: linear-gradient(left, @startColor, @endColor); // Le standard
- }
- .vertical (@startColor: #555, @endColor: #333) {
- background-color: @endColor;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
- background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
- background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
- background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
- -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); // IE8+
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE6 & IE7
- background-image: linear-gradient(@startColor, @endColor); // The standard
- }
- .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
Get fancy and perform some math to generate flexible and powerful mixins like the one below.
- // Griditude
- @gridColumns: 16;
- @gridColumnWidth: 40px;
- @gridGutterWidth: 20px;
- // Grid System
- .container {
- width: @siteWidth;
- margin: 0 auto;
- .clearfix();
- }
- .columns(@columnSpan: 1) {
- display: inline;
- float: left;
- width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
- margin-left: @gridGutterWidth;
- &:first-child {
- margin-left: 0;
- }
- }
- .offset(@columnOffset: 1) {
- kenar boşluğu - sol : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 ) ) ! önemli ;
- }