Başlıklar

Tüm Html Başlık Kodları, <h1> Başlanıç<h6>, Bitiş.

h1. Van Web Tasarım

h2. Van Web tasarım

h3. Van Web Tasarım

h4. Van Web Tasarım

h5. Van Web Tasarım

h6. Van Web Tasarım

 <p class="h1">h1. Van Web Tasarım</p>
 <p class="h2">h2. Van Web Tasarım</p>
 <p class="h3">h3. Van Web Tasarım</p>
 <p class="h4">h4. Van Web Tasarım</p>
 <p class="h5">h5. Van Web Tasarım</p>
 <p class="h6">h6. Van Web Tasarım</p>

Öncülük Yapmak

Bunu Ekleyerek Bir Paragrafın Öne Çıkmasını Sağlayabilrisiniz. .lead

Bu Bir Başlangıç Paragrafıdır.
Yazılı Olan Kod İle Bu İşelmi Sağlayabilirsiniz. .lead.

Van Web Tasarım ve Yazılım Hizmetleri Olarak Firmalar ve bireysel  kullanıcılar için her sektöre uygun tasarımlar hazırlayarak Herkese bir Web Sayfası Sistemini Yaymayı Hedefliyoruz.

Yukarıda Belirtmiş olduğumuz kodu yazdıktan sonra oluştaracağınız makalelerde göründüğü gibi öne çıkan paragraf. 

ve sonrasında devam eden paragraf sıralamasını yazmış olduk.

aşağıda kodun nasıl kullanılacağını örnek olarak ekleyelim 

<p class="lead">
Bu bir öne çıkan <strong>paragaftır</strong>. <br>
Alt paragraf bu şekilde devam etmektedir. Gerekli Olan kodumuz <code>.lead</code>.
</p>

Adresimiz

Van Web Tasarım
Covid19 Yasaklar Kapsamında Şuanda
Home Ofis Olarak Hizmet Vermekteyiz
Van Web tasarım
P: (0850) 665 60
İnfo@vanweb.net
<address>
  <strong>Van Web Tasarım</strong><br>
  Covid19 Yasaklar Kapsamında Şuanda<br>
  Home Ofis Olarak Hizmet Vermekteyiz<br>
  <abbr title="Phone">P:</abbr> (0850) 665 60 65
</address>

<address>
  <strong>Van Web Tasarım</strong><br>
  <a href="mailto:#">info@vanweb.net</a>
</address>

Vurgu Sınıfları

Bu Bir .mute Sessizlik Paragrafıdır

Bu bir  .text-primary Birincil paragrafıdır.

Bu bir  .text-warning Tehlike paragrafıdır.

This is a .text-danger paragraph.

This is a .text-success paragraph.

This is a .text-info paragraph.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Hizalama Sınıfları

Bu Sola Doğru Hizalama Html Kodudur  .text-left

Bu Merkezi Hizalama Html Kodudur  .text-center

Bu Sağa Doğru Hizalama Html Kodudur .text-right

Bu, genellikle Kitap Tasarımı, Dergi veya özel Yazım hatası Sayfalarında kullanılan, hizalanmış bir metindir. .text-justify İle hizalanmış bir metin oluşturalım.

<p class="text-left">Sola Hizala.</p>
<p class="text-center">Merkeze Hizala.</p>
<p class="text-right">Sağa Hizala.</p>
<p class="text-justify">İki Yana Yasla.</p>
<p class="text-nowrap">Kaydırma Yapma.</p>

Gömme İşlemleri

D Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod  
Integer dictum est vitae sem. Vestibm justo. Nulla mauris ipsum, convallis ut, vestibulum eu, tincidunt vel, nisi. Curabitur molestie euism od erat. Proin eros odio, mattis rutrum, pulvinar et, egestas vitae, magna. Integer semper, velit ut nisl. Nam lectus nulla, bibendum pretium, dictum a, mattis nec, dolor.

D ullam ac nisi non eros gravida venenatis. Ut euismod, turpis sollicitudin lobortis pellentesque, libero massa dapibus dui, eu dictum justo urna et mi. Integer dictum est vitae sem. Vestibm justo. Nulla mauris ipsum, convallis ut, vestibulum eu, tincidunt vel, nisi. Curabitur molestie euism od erat. Proin eros odio, mattis rutrum, pulvinar et, egestas vitae, magna. Integer semper, velit ut nisl. Nam lectus nulla, bibendum pretium, dictum a, mattis nec, dolor.

<span class="dropcap color-custom">D</span>
<span class="dropcap color-dark">D</span>

Heading Helper Classes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros tellus, scelerisque nec, rhoncus eget, sollicitudin eu, vehicula venenatis, tempor vitae, est. Praesent vitae dui. Morbi id tellus. Nullam ac nisi non eros gravida venenatis. Ut euismod, turpis social-links--largecitudin lobortis pellentesque, libero massa dapibus dui, eu dictum justo urna et mi. Integer dictum est vitae sem.

<span class="mark bg-custom color-white">..</span>
<span class="mark bg-black color-white">...</span>
<a href="#" class="color-custom underline">...</a>
<a href="#" class="color-dark underline ">...</a>

Definition Lists

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontal Definition

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Lists

Unordered Lists (Nested)

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="simple-list">
  <li>...</li>
</ul >

Ordered List (Nested)

  1. List item one

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt

    1. List item two

    2. List item three

    3. List item four

  2. List item two

  3. List item three

  4. List item four

<ol class="decimal-list">
  <li>...</li>
</ol>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Quote's author in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Quote's author in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<blockquote class="blockquote-reverse">
  ...
</blockquote>
<div class="tags">
      <span class="tag"><a class="label label-default" href="#">hotel</a></span> 
      <span class="tag"><a class="label label-primary" href="#">booking</a></span>
      <span class="tag"><a class="label label-success" href="#">discount</a></span>
      <span class="tag"><a class="label label-info" href="#">location</a></span> 
      <span class="tag"><a class="label label-warning" href="#">map</a></span> 
      <span class="tag"><a class="label label-danger" href="#">travel</a></span>
</div>

Brand Colors

#234269

Brand Primary

#f87831

Brand Secondary

#f0ad4e

Brand Warning

#d9534f

Brand Danger

#5bc0de

Brand Info

#5cb85c

Brand Success

<div class="swatch-item color-brand-primary">...</div>
<div class="swatch-item color-brand-secondary">...</div>
<div class="swatch-item color-brand-warning">...</div>
<div class="swatch-item color-brand-danger">...</div>
<div class="swatch-item color-brand-info">...</div>
<div class="swatch-item color-brand-success">...</div>

 

Grayscale Levels

 

Gray Darker

 

Gray Dark

 

Gray

 

Gray Light

 

Gray Lighter

 

Gray Lightest

<div class="swatch-item color-gray-darker">...</div>
<div class="swatch-item color-gray-dark">...</div>
<div class="swatch-item color-gray">...</div>
<div class="swatch-item color-gray-light">...</div>
<div class="swatch-item color-gray-lighter">...</div>
<div class="swatch-item color-gray-lightest">...</div>
<a class="btn btn-default" href="#">Normal Button</a> 
<a class="btn btn-primary" href="#">Primary Button</a>
<a class="btn btn-warning" href="#">Warning Button</a>
<a class="btn btn-danger" href="#">Danger Button</a> 
<a class="btn btn-info" href="#">Info Button</a>
<a class="btn btn-success" href="#">Succes Button</a>

Tabs

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

Error message title

Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

Sussess message title

Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

Info message title

Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

Warning message title

Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Panels

Panel heading
Panel content

Panel primary

Panel content

Panel success

Panel content

Panel warning

Panel content

Panel danger

Panel content

Panel info

Panel content
<div class="panel panel-default">...</div>
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

 

Wells

Look, I'm in a small well!
Look, I'm in a well!
Look, I'm in a large well!
<div class="well well-sm">...</div>
<div class="well">...</div>
<div class="well well-lg">...</div>

1 COLUMN

Center Align

Lorem ipsum dolor sit amet conse ctetur 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. Duis aute irure dolor in reprehenderit in voluptate.Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt.

Left Align

Lorem ipsum dolor sit amet conse ctetur 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. Duis aute irure dolor in reprehenderit in voluptate.Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt.

Right Align

Lorem ipsum dolor sit amet conse ctetur 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. Duis aute irure dolor in reprehenderit in voluptate.Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt.

1/2 COLUMNS

Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellenlaoreet justo ultrices. In pellentesque lorem condimentum dui morbi pulvinar dui non quam pretium ut lacinia tortor. Fusce lacinia tempor malesuada. Fringilla penatibus orci est non mollit, suspendisse pulvinar egestas a donec.

1/2 COLUMNS

Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellenlaoreet justo ultrices. In pellentesque lorem condimentum dui morbi pulvinar dui non quam pretium ut lacinia tortor. Fusce lacinia tempor malesuada. Fringilla penatibus orci est non mollit, suspendisse pulvinar egestas a donec.

1/3 COLUMNS

Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellenlaoreet justo ultrices. In pellentesque lorem condimentum dui morbi pulvinar dui non quam pretium ut lacinia tortor. Fusce lacinia tempor malesuada. Fringilla penatibus orci est non mollit, suspendisse pulvinar egestas a donec.

1/3 COLUMNS

Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellenlaoreet justo ultrices. In pellentesque lorem condimentum dui morbi pulvinar dui non quam pretium ut lacinia tortor. Fusce lacinia tempor malesuada. Fringilla penatibus orci est non mollit, suspendisse pulvinar egestas a donec.

1/3 COLUMNS

Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellenlaoreet justo ultrices. In pellentesque lorem condimentum dui morbi pulvinar dui non quam pretium ut lacinia tortor. Fusce lacinia tempor malesuada. Fringilla penatibus orci est non mollit, suspendisse pulvinar egestas a donec.

2/3 COLUMNS

Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellenlaoreet justo ultrices. In pellentesque lorem condimentum dui morbi pulvinar dui non quam pretium ut lacinia tortor. Fusce lacinia tempor malesuada. Fringilla penatibus orci est non mollit, suspendisse pulvinar egestas a donec. Vulputate mi dui suscipit, molestie vulputate libero fusce iaculis suscipit. Sapien pede libero. Maecenas lacus aliquet et nisl nunc, per sed sed maecenas.Lectus tincidunt pellentesque augue urna sit sed, arcu sed ante ac montes pellentesque consectetuer, neque magnis penatibus laoreet magnis convallis posuere adipiscing, dapibus suspendisse nonummy pellentesque consequat interdum odio.

1/3 COLUMNS

Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellenlaoreet justo ultrices. In pellentesque lorem condimentum dui morbi pulvinar dui non quam pretium ut lacinia tortor. Fusce lacinia tempor malesuada. Fringilla penatibus orci est non mollit, suspendisse pulvinar egestas a donec.

1/4 COLUMNS

Mauris aliquet ultricies ante, non ante gravida sed. Sed ultrices pel lenlao reet justo ultrices. In pellentesque lorem con dimentum dui morbi pulvinar dui non quam pretium ut lacinia suspe ndisse pulvinar donec labore diam.

1/4 COLUMNS

Mauris aliquet ultricies ante, non ante gravida sed. Sed ultrices pel lenlao reet justo ultrices. In pellentesque lorem con dimentum dui morbi pulvinar dui non quam pretium ut lacinia suspe ndisse pulvinar donec labore diam.

1/4 COLUMNS

Mauris aliquet ultricies ante, non ante gravida sed. Sed ultrices pel lenlao reet justo ultrices. In pellentesque lorem con dimentum dui morbi pulvinar dui non quam pretium ut lacinia suspe ndisse pulvinar donec labore diam.

1/4 COLUMNS

Mauris aliquet ultricies ante, non ante gravida sed. Sed ultrices pel lenlao reet justo ultrices. In pellentesque lorem con dimentum dui morbi pulvinar dui non quam pretium ut lacinia suspe ndisse pulvinar donec labore diam.

3/4 COLUMNS

Nam ac ipsum dui, a sollicitudin massa. Pellentesque semper ligula ut eros dapibus sit amet vehicula nisi tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget urna sit amet sapien vestibulum auctor ac blandit erat. Sed sagittis volutpat urna nec lobortis. Aser velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur.

1/4 COLUMNS

Mauris aliquet ultricies ante, non ante gravida sed. Sed ultrices pel lenlao reet justo ultrices. In pellentesque lorem con dimentum dui morbi pulvinar dui non quam pretium ut lacinia suspe ndisse pulvinar donec labore diam.

1/6 COLUMNS

Mauris aliquet ultrics ant, ultrices pel lenlao rejusto sed ultrices. In pellesque pretium utlore lacini et ndisse pulvinar donec labore diam.

1/6 COLUMNS

Mauris aliquet ultrics ant, ultrices pel lenlao rejusto sed ultrices. In pellesque pretium utlore lacini et ndisse pulvinar donec labore diam.

1/6 COLUMNS

Mauris aliquet ultrics ant, ultrices pel lenlao rejusto sed ultrices. In pellesque pretium utlore lacini et ndisse pulvinar donec labore diam.

1/6 COLUMNS

Mauris aliquet ultrics ant, ultrices pel lenlao rejusto sed ultrices. In pellesque pretium utlore lacini et ndisse pulvinar donec labore diam.

1/6 COLUMNS

Mauris aliquet ultrics ant, ultrices pel lenlao rejusto sed ultrices. In pellesque pretium utlore lacini et ndisse pulvinar donec labore diam.

1/6 COLUMNS

Mauris aliquet ultrics ant, ultrices pel lenlao rejusto sed ultrices. In pellesque pretium utlore lacini et ndisse pulvinar donec labore diam.

5/6 COLUMNS

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eros tellus, scelerisque nec, rhoncus eget, laoreet sit amet, nunc. Ut sit amet turpis. In est arcu, sollicitudin eu, vehicula venenatis, tempor vitae, est. Praesent vitae dui. Morbi id tellus. Cum sociis natoque penatibus et magnis dis part urient montes, nascetur ridiculus mus. Maecenas eu enim in lorem scelerisque auctor. Ut non erat. Suspendisse fermentum posuere lectus. Fusce vulputate nibh egestas orci. Aliquam lectus. Morbi eget dolor ullamcorper massa pellentesque sagittis. Morbi sit amet quam sed felis. Quisque vest ibulum massa. Nulla ornare. Nulla libero. Donec et mi eu massa ultrices scelerisque. Nullam ac nisi non eros gravida venenatis. Ut euismod, turpis sollicitudin lobortis pellentesque, libero massa dapibus dui, eu dictum justo urna et mi. Integer dictum est vitae sem.

1/6 COLUMNS

Mauris aliquet ultrics ant, ultrices pel lenlao rejusto sed ultrices. In pellesque pretium utlore lacini et ndisse pulvinar donec labore diam.