Konular

EBooklar

Bootstrap 3'e ait classlar ve görevleri

Bootstrap Class Referansı

.center-block

  • margin-left ve margin-right değerini auto yapar.

.col-xs-1 .col-xs-2
.col-xs-3 .col-xs-4 
.col-xs-5 .col-xs-6
.col-xs-7 .col-xs-8
.col-xs-9 .col-xs-10
.col-xs-11 .col-xs-12

  • can be nested, the nested columns must be wrapped in .row as well

  • all columns have float: left and position: relative styles

  • sets width of a column (specified in %) on extra small screens (<768pxt)

.col-sm-1 .col-sm-2
.col-sm-3 .col-sm-4
.col-sm-5 .col-sm-6
.col-sm-7 .col-sm-8
.col-sm-9 .col-sm-10
.col-sm-11 .col-sm-12

  • can be nested, the nested columns must be wrapped in .row as well

  • all columns have float: left and position: relative styles

  • sets width of a column (specified in %) on small screens (≥768px)

.col-md-1 .col-md-2
.col-md-3 .col-md-4
.col-md-5 .col-md-6
.col-md-7 .col-md-8
.col-md-9 .col-md-10
.col-md-11 .col-md-12

  • can be nested, the nested columns must be wrapped in .row as well

  • all columns have float: left and position: relative styles

  • sets width of a column (specified in %) on medium size screens (≥992px)

.col-lg-1 .col-lg-2
.col-lg-3 .col-lg-4
.col-lg-5 .col-lg-6
.col-lg-7 .col-lg-8
.col-lg-9 .col-lg-10
.col-lg-11 .col-lg-12

  • can be nested, the nested columns must be wrapped in .row as well

  • all columns have float: left and position: relative styles

  • sets width of a column (specified in %) on large screens (≥1200px)

.col-xs-offset-*
.col-sm-offset-* 
.col-md-offset-*
.col-lg-offset-* 

  • sets offset (margin-left) by specified number of columns (eg. set .col-sm-offset-3 class to a column to move it by three columns on small screens)

.col-xs-pull-* 
.col-sm-pull-*
.col-md-pull-*
.col-lg-pull-* 

  • sets left position in % as it is with columns (e.g. left: 75% with -pull-9)

.col-xs-push-*
.col-sm-push-*
.col-md-push-*
.col-lg-push-*

  • sets right position in % as it is with columns (e.g. right: 25% with -push-3)

.container

  • Ekran genişliği kadar yayılmaz. Ekran Genişliğini (1170px, 970px, 750px gibi)  otomatik belirlemek ve hapis ettiği nesnenin sağından solunda 15px boşluk verir, içinde bulunduğu ekran çözürlüğüne  göre kendini ortalar.

  • sets fixed width to an element (which changes depending on a screen size to other fixed values, so it's still responsive) on all screen sizes except xs - on xs, the width is calculated automatically (this behaviour can be changed)

  • a fixed width responsive website should be wrapped in .container (or just the content without menu, whatever - it's up to you)

  • .container can't be nested!

.container-fluid

  • Ekran genişliği kadar yayılır. Ekran genişliği belirlemez sadece hapis ettiği nesnenin sağından solunda 15px boşluk verir, ekrana ortalama işlemi yapmaz.

  • sets 100% width, margin-left and margin-right: auto, padding-left and padding-right: 15px

  • a full screen website should be wrapped in .container-fluid

  • .container-fluid can't be nested!

.row

  • Yatay kolon grupları oluşturur.

  • must be within .container to ensure correct padding and alignment

  • only columns (block elements with width classes) may be immediate children of rows

  • margin-left ve margin-right: -15px değerindedir.

.pull-right, .pull-left

  • float değerini left yada right yapar. Yani eklendiği nesneyi sola yada sağa hizalar.

.wrap

  • sets clear: both and width: 100%

Bootstrap Text Classları

.text-danger, .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger

 

.text-left, .text-center, .text-right, .text-justify, .text-nowrap, .text-lowercase, .text-uppercase, .text-capitalize

 

 

 

Bootstrap Background Classları

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger

 

 

 

Bootstrap Visibility Classları

  • you can apply all as many of these classes on a single element as you wish and this mixing gives you even more possibilities for your layout

.clearfix

  • obvious, clear: both

  • often combined with classes below

.visible-xs-block and .visible-xs

.visible-sm-block and .visible-sm

.visible-md-block and .visible-md

.visible-lg-block and .visible-lg

  • displays element (sets display: block property) only on screens with specified size and hides it (sets display: none) on screens of other sizes automatically

  • often combined with .clearfix so that clearfix is effective only on the selected screen size

.visible-xs-inline-block

.visible-sm-inline-block

.visible-md-inline-block

 

.visible-lg-inline-block

  • displays element (sets display: inline-block property) only on screens with specified size and hides it (sets display: none) on screens of other sizes automatically

.visible-xs-inline

.visible-sm-inline

.visible-md-inline

.visible-lg-inline

  • displays element (sets display: block property) only on screens with specified size and hides it (sets display: none) on screens of other sizes automatically

.hidden-xs

.hidden-sm

.hidden-md

.hidden-lg

  • hides element (sets display: none property) only on screens with specified size and hides it (sets display: none) on screens of other sizes automatically

.visible-print-block

  • displays element (sets display: block) in print (pre)view

.visible-print-inline

  • displays element (sets display: inline) in print (pre)view

.visible-print-inline-block

  • displays element (sets display: inline-block) in print (pre)view

.hidden-print

  • hides element (sets display: none) in print (pre)view

Bootstrap Typography Classes

  • default font-size of <body> a <p> elements is 14px, line-height 1.428; <p> also has margin-bottom of half of its line-height (20px with 14px font), therefore 10px by default

  • all elements like b, big, code, em, i, mark, small, strong, sub, sup, ins, del, s, u, abbr, address and blockquote (and small and cite inside) are properly styled

  • vast majority of these classes are most often set to either paragraph, strong or em elements

.page-header

  • class for a wrapping div of a heading

  • adds some margin, padding and border-bottom

 

.lead

 

  • for highlighting an element

  • sets element's font-size to 21px, font-weight: 300, line-height: 1.4 and margin-bottom: 20px

 

Bootstrap Lists' Classes

.list-unstyled

  • removes list-style and margin-left on list items

  • doesn't apply for nested lists (if needed, the nested list has to have .list-unstyled class as well)

.list-inline

  • places list items on a single line (with display: inline-block and padding)

.dl-horizontal

  • class for a definition list (<dl>)

  • sets nice styles for <dt> and <dd> within the definition list (text align, font-weight)

.list-group

  • class for the parent element (usually <ul>, but can be <div> as well) of list items

  • list items have to have .list-group-item class

.list-group-item

  • class for .list-group children elements

  • for a nicer look of the list items

  • usually on <li>, but can be <a> as well

.list-group-item-heading

  • for a heading within .list-group-item, often <h4> or similar low-level heading

.list-group-item-text

  • for text within .list-group-item, often in the paragraph tag or just in a span

Bootstrap Tables' Classes

.table

  • for an ordinary table

  • table heading has only border-bottom and <td>s have only border-top

.table-striped

  • every odd line will be darker for a nicer look (using :nth-child selector)

  • table heading <th> has only border-bottom and <td>s have only border-top

  • should be combined with .table class

.table-bordered

  • table with borders all around

  • should be combined with .table class

.table-hover

  • class for a table

  • adds hover/focus effect on the table's tbody rows

  • should be combined with .table class

.table-condensed

  • should be combined with .table class

  • for an ordinary table with half cell padding, so rows are not that high

.table-responsive

  • class for a wrapper (! mostly div) of a table to keep it responsive in the way that scrollbar appears on extra small devices

.active

.success

.info

.warning

.danger

  • classes for either <tr> or just <td>

  • sets background color for all <td> in a table row (or just one <td>) to grey (active) / green (success) / blue (info) / yellow (warning) / red (danger)

Bootstrap Forms' Classes

  • don't forget that even form elements can be in the Bootstrap grid, so don't be afraid to use .row inside a form and then col-*-* wrappers

.form-group

  • when creating vertical forms, it's a class for its wrapper (mostly div) of each label and its input, adds some margin-bottom

.form-control

  • for every form element (input, textarea...), gives it 100% width

  • to make it narrower, use a narrower wrapper (row and col-*-* divs)

.form-control-static

  • for a paragraph that replaces a form element (input...)

.form-horizontal

  • for horizontal forms where label is on the same line as input

  • you have to use column classes (like col-xs-10) for each label and its input (or whateveer it is)

  • still combined with .form-group wrapper and .form-control classes

.form-inline

  • for a single line form (but still vertical on extra small screens)

  • often used with the placeholder attribute to not need labels

  • labels of inline forms should get .sr-only class to be positioned so that they can't be seen (but they won't get display: none or visibility: hidden property)

.input-lg

.input-sm

  • makes a form element like input or select either bigger or smaller than default

.input-group-lg

.input-group-sm

  • classes for .input-group (see further)

  • always used together with .input-group class

.input-group

  • class for a wrapper of .input-group-addon or .input-group-btn

  • used instead of form-group when the classes above are used

.input-group-addon

  • class for a span that serves as a wrapper for either .glyphicon or a radio/checkbox input

  • adds your choice (glyphicon...) on the inner edge of an input field with grey background

  • the span with this class can be either before or after input, depends where you want the icon to show (the left or right side of the input)

  • must be within .input-group

.input-group-btn

  • class for a span that serves as a wrapper for a button that looks like it was within a form input

  • the span with this class can be either before or after input, depends where you want the button to show (left or right side of the input)

  • contains <button> (the button can also include .dropdown-toggle class, span with .caret class and data-toggle="dropdown" attribute for even more complicated buttons)

  • must be within .input-group

.caret

  • class for an empty span that creates a dropdown arrow

.help-block

  • class for a span that serves as a help text for users

  • has to be placed right after an input of a form

.has-success

.has-warning

.has-error

  • classes for wrapping divs with .form-group class

  • colours the label, input and .help-block span inside to green/yellow/red

  • the label within the wrapper with one of these classes has to have .control-label class to be coloured as well

.has-feedback

  • class for the wrapping divs with .form-group class when you also use glyphicon for the input within the wrapper

To disable input, use disabled="disabled" or readonly="readonly",
To disable whole fieldset, wrap form-groups to fieldset with disabled="disabled"

Bootstrap Image Classes

  • images should have .img-responsive or .thumbnail to be responsive and be wrapped in a column wrapper (like col-xs-3...)

.img-rounded

  • img class that provides little border-radius

.img-circle

  • img class that provides 50% border-radius making the img circle shaped

.img-thumbnail

  • img class that provides a 1px solid grey border, 4px padding, white background, display: inline-block property and fast CSS3 transition

.thumbnail

  • class for a wrapping div (or <a> in case of gallery) of an image, adds some styles (border, padding, background, transition) and set's the image max-width: 100%, height: auto; display: block; and margin-left and margin-right: auto

.img-responsive

  • img class that makes any image responsive (scaling to the parent element) as it has max-width: 100% and height: auto

  • may not work if placed in a floating element!

.caption

  • class for a div inside .thumbnail element (a or div) that may include h3, p, a (also buttons) for a proper margin/padding

.media

  • class for a div (or li, whatever) that may contain an image, a heading, some <small> text and paragraphs

  • ensures proper image margin/padding

  • heading inside should also have media-heading attribute and should be (together with paragraphs) wrapped in a .media-body wrapper

  • any image within should have .pull-left or .pull-right class to float

.media-list

  • class for a list (ul, ol) that contains .media inside

  • ensures better margin/padding

.glyphicon

  • base class for glyphicons (font-based icons), sets font, its styles and positioning

  • should be used on a span

.glyphicon-* (replace the star with any name of a glyphicon from this list)

  • sets picture via font and :before CSS3 selector with content of the font

  • must be used together with .glyphicon class to show proper image

  • should be used on a span

Bootstrap Embed Classes

.embed-responsive

  • general class for responsive embedding wrapper

.embed-responsive-4by3

.embed-responsive-16by9

  • specific class for the embed wrapper with ratio already set

  • used together with .embed-responsive class

.embed-responsive-item

  • used on the iframe or whatever it is inside the wrapper

Bootstrap Navigation Classes

.nav

  • the basic class for every navigation structure (<ul>), removes any list-style, left padding and bottom margin

  • also sets display: block and position relative for its <li> children

  • must be set on every navigation

.active

  • class for a list item (nav item, li) that makes it look active / current

.nav-tabs

  • class for navigation structure that gives it a tab style (proper borders + float: left)

.nav-pills

  • class for navigation structure that gives it a pills style (background on active nav item)

.nav-stacked

  • makes vertical pills navigation

  • used together with .nav-pills (and .nav of course)

.dropdown

  • class for an

  • nav item to make it dropdown

  • needs additional classes elsewhere to work (see below)

.dropdown-toggle

  • class for an <a> which is within <li class="dropdown"> to make a dropdown menu

  • needs additional classes elsewhere to work (see below)

.dropdown-menu

  • class for an <ul> which is within <a class="dropdown-toggle"> to make a dropdown menu

  • provides proper displaying and hiding

  • the most important dropdown menu class

  • needs .dropdown and .dropdown-toggle classes on parent elements (see above)

.nav-justified

  • class for an <ul>, together with .nav-tabs or .nav-pills creates a navigation with centered text and links' parent elements of the same width

.disabled

  • class for <li> in a navigation

  • disables the link inside VISUALLY and also adds a special mouse cursor, but the link remains active - you need to remove the href attribute of the <a> to completely disable the link

Bootstrap Navbar Classes

  • the difference between nav and navbar classes is the fact that navbar can collapse the whole nav (the nav can't do it on its own)

.navbar

  • basic class for a navigation wrapper (usually <nav>), sets border, bottom margin, min-height and position: relative

  • if it's not supposed to be fixed, can be placed anywhere in .container or .container-fluid

.navbar-default

  • sets other basic styles for a navigation wrapper (background gradient and box-shadow) and also its items (including .active class on <li>s)

  • beyaz ve gri reklerden oluşan standart navbar ekler

.navbar-inverse

  • navbar-default özellikleriyle aynı ancak koyu renkte olanını oluşturur.

  • never use navbar-default and navbar-inverse on one element as it doesn't make any sense

.navbar-brand

  • sets styles for special hyperlinks and other "simple text" in a menu (float: left, bigger font size, some padding, text-shadow...)

.navbar-fixed-top, .navbar-fixed-bottom

  • Sayfanın üstünde yada sabit bir navbar ekler. Kaydırma işlemine rağmen konumunu terk etmez.

  • used together with .navbar and also .navbar default (just to keep the nice look)

  • you should add some top or bottom padding to your <body> to not let the navbar overflow your content

.navbar-static-top

  • üst, sol, sağ ve alt çizgileri yok eder. Tam ekran uzunluğunda barı yayar. navbar ekranla beraber kaymaz.

.navbar-left   .navbar-right

  • Navbar üzerinde bir nesneyi sağa sola yaslamak için kullanılır.

.breadcrumb

  • class for <ul> that serves as breadcrumbs

  • gives breadcrumbs a cool look

.pagination

  • class for <ul> that serves as pagination

  • properly styles <li> within this pagination also with .disabled and .active classes (keep in mind that .disabled doesn't remove link's functionality)

.pagination-lg

.pagination-sm

  • used on <ul> together with .pagination, makes pagination either bigger or smaller than default

.pager

  • used on <ul>, styles "Previous" and "Next" links to look better with a grey border

  • its list items can have .previous, .next and also disabled classes for even better styling

.next

.previous

  • used on <li> within <ul class="pager">, adds arrows to the links

Diğer Classlar

Class Description
.pull-left Floats an element to the left
.pull-right Floats an element to the right
.center-block Sets an element to display:block with margin-right:auto and margin-left:auto
.clearfix Clears floats
.show Forces an element to be shown (display:block)
.hidden Forces an element to be hidden (display:none)
.invisible Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible
.sr-only Hides an element to all devices except screen readers
.sr-only-focusable Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user)
.text-hide Helps replace an element's text content with a background image
.close Indicates a close icon
.caret Indicates dropdown functionality (will reverse automatically in dropup menus)

 

 

Kaynaklar:

 

Yorumunuzu Ekleyin




  • Bootstrap Grid Sistemi
  • Bootstrap Grid Sistemi ~ 9,118

    Bildiğiniz gibi Bootstrap ile responsive tasarımlar yapmak çok basit ve hızlı. İstediğimiz her öğe için birer yapılmış ve kopyala yapıştır yaparak hızlıca sitemizi Bootstrap ile şekillendirebiliriz.