Web Teknolojileri Hafta 9 1. İçerik  Bootstrap - 2 2.

... konulu sunumlar: "Web Teknolojileri Hafta 9 1. İçerik  Bootstrap - 2 2."— Sunum transkripti:

1 Web Teknolojileri Hafta 9 1

2 İçerik  Bootstrap - 2 2

3 Jumbotron  Kullanıcıları karşılama ekranı oluşturmak için kullanılır. Sitenin ana içeriğini tüm ekrana yayarak gösteren bir bileşendir. Jumbotron.htmlJumbotron.html Bootstrap Tutorial Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. This is some text. This is another text. 3

4 Panel  Paneller içeriği bir kutu içersine koymak için kullanılır. Başlıklı, alt başlıklı seçenekleri vardır. Panel.htmlPanel.html   Panel Footer   Panel Heading  Panel Content  Panel Footer  4

5 Dropdown  Açılır/kapanır menü oluşturur. Dropdown.htmlDropdown.html  Dropdown Example HTML CSS JavaScript 5

6 Collapse  Açıp/kapama davranışı için bazı sınıfları yöneten esnek bir eklentidir..collapse içeriği gizler,.collapse in, içeriği gösterir.  Collapse.html  Simple collapsible   Lorem ipsum dolor sit amet, consectetur adipisicing elit,  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  6

7 Tabs  Tablar şeklinde menü olışturur. Tabs.htmlTabs.html   Tabs   Home  Menu 1  Menu 2  Menu 3   Note: This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out how this can be done.  7

8 Pills  Buton tarzında menü oluşturur. Nav-stacked menüyü dikey yapar. Pills.htmlPills.html   Vertical Pills   Home  Menu 1  Menu 2  Menu 3  8

9 Navbar  Menü çubuğu oluşturmak için kullanılır. .navbar-inverse : Menü rengini zıt renge çevirir. .navbar-fixed-top : Üst tarafta sabit menü çubu ğ u oluşturur. .navbar-fixed-bottom : Üst tarafta sabit menü çubu ğ u oluşturur.  Navbar1.html Navbar1.html  Navbar2.html Navbar2.html  Navbar3.html Navbar3.html  Navbar4.html Navbar4.html 9

10 Carousel  Elementler arasında dönmek için bir gösteri aracıdır, tıpkı atlı karınca gibi. Slide gösterisi yapmak için kullanılır. Carousel.html Carousel.html  carousel : bu class bunun bir Carousel olduğunu belirler.  Slide : css geçişi ve animasyon effekti verir.  Data-interval:slider geçiş süresi (ms)  Carousel-indicator:göstereceğimiz i tem kadar li koyuyoruz ve data-slide-to ya 0-1-2-3... sekil de numaranlandırıyoruz.  Carousel-inner : div’lerin içine resim item’lar tanımlanıyor.  Carousel-control : sol ve sağ’da ileri-geri butonları tanımlanıyor. 10

11 Modal  Esnek bir diyalog penceresi özelli ğ i için kullanılır. Modal.html Modal.html  data-toggle="modal : modal penceresini açar.  data-target="#myModal : modal’ın id’si tanımlanır.  fade : açılıp-kapanırken geçiş effekti verir.  Modal-content:modal içeriğinin tanımı  Modal-header, modal-body ve modal-footer : başlık, gövde ve alt kısmın tanımlarının yapıldığı class’lar 11

12 Tooltip  Herhangi bir elemanın üzerine gelindi ğ inde açıklama çıkmasını sa ğ layan bileşendir.  Tooltip.html Tooltip.html  data-toggle=‘tooltip’ : tooltip özelliğini ekler  data-placement="top« : tooltip’in konumu tanımlanabilir. 12

13 Popover  Herhangi bir elemanın üzerine gelindi ğ inde açıklama çıkmasını sa ğ layan Tooltip’ten daha fazla içerik sunabilen bileşendir.  Popover.html Popover.html  data-toggle=‘popover’ : popover özelliğini ekler  data-placement="top« : popover’in konumu tanımlanabilir.  data-trigger="focus« : popover kapatılması için  data-trigger="hover« : fare eleman üzerine gelince göstermesi için 13

14 Scrollspy  Scroollspy bileşeni, hedeflenen bölüme scroll yapmayı sa ğ lar.  Scrollspy.html Scrollspy.html  data-spy = "scroll : Body elemanına eklenmelidir.  data-target=".navbar« : Scrollspy’in dikkate alaca ğ ı menü bileşeninin class’ı 14

15 Affix  Sayfada scroll yapılsa dahi yatya veya düşey menünün sabit kalmasını sa ğ layan bileşen.  Affix.html Affix.html  data-spy="affix" : Menü bileşenine eklenir.  data-offset-top="205« : Ofset mesafesi tanımlanır 15