kode bootstrap

Cara menggunakan ukuran teks bootstrap

Halo gan, kenapa font bootstrap tidak bisa diubah langsung dari tag body { font-family di file style. css? . php menggunakan font google Terima kasih gan

@ciloxz oh jadi gak bisa, soalnya pernah saya liat di tutorial bikin template dari awal pake bootstrap 4 versi beta, fontnya bisa dirubah dari style. css karena formatnya masih menggunakan web html/statis biasa, saya juga kurang tahu. Kalau tutorialnya gratis saya mau share disini, tapi tutorialnya berbayar sebagai key untuk non member. Saya baru saja mengubah langsung dari file bootstrap. min. css dan berhasil. Saya pikir ada cara lain, tapi ternyata tidak ada. oke gan terima kasih

@hijau segar

17 Kontribusi 4 Poin

Diposting. 4 tahun yang lalu

Setelah sebelumnya kita membahas tentang bootstrap image dan bootstrap button, pada kesempatan kali ini kita akan membahas tentang hal yang paling penting dalam pembuatan website sobat yaitu Text atau tipografi.

Jika mungkin ada yang belum mengetahui apa itu tipografi, menurut Wikipedia tipografi adalah ilmu dalam memilih dan menyusun huruf dengan susunan sebarannya pada ruang-ruang yang tersedia, untuk menimbulkan efek tertentu, sehingga dapat membantu pembaca untuk dapatkan kenyamanan membaca semaksimal mungkin

Menurut definisi di atas, tujuan tipografi adalah untuk memperoleh kenyamanan dan kemudahan dalam membaca. Tujuan ini juga berlaku untuk website yang akan sobat buat agar konten dari website sobat terlihat lebih tertata, jelas, dan tidak membingungkan pembaca.

Bagian Artikel

Tipografi Bootstrap Default

Pada bootstrap khususnya bootstrap 4 yang saya gunakan memiliki setting teks atau tipografi default yaitu font-size. 16px, tinggi baris. 1. 5 [font-size untuk ukuran font dan line-height untuk spasi antar baris] dengan jenis font yang digunakan adalah “Helvetica Neue”, Helvetica, Arial, dan sans-serif

Menuju bootstrap

Pada bootstrap tag heading yang digunakan masih sama yaitu menggunakan

sampai dengan semakin kecil semakin tebal dan besar heading yang teman -teman buat.

Lihatlah contoh di bawah ini

< a href="//dosenit.com/html/tutorial-html"html/a>

	
 	 Bootstrap Heading
 	 
 	  
	 
 	 
  	 
     
	
	
      
        
h1 Bootstrap heading [2.5rem = 40px]

        
h2 Bootstrap heading [2rem = 32px]

        
h3 Bootstrap heading [1.75rem = 28px]

        
h4 Bootstrap heading [1.5rem = 24px]

        h5 Bootstrap heading [1.25rem = 20px]
        h6 Bootstrap heading [1rem = 16px]

Tampilan Tajuk Bootstrap

Bagi sobat yang belum mengetahui tentang Display Heading, Display Heading merupakan jenis heading dengan tampilan ukuran font yang lebih besar dan tidak terlalu tebal dibandingkan heading biasa.

Ada 4 kelas untuk Display Heading yaitu. .display-1, .display-2, .display-3, .display-4. Untuk lebih jelasnya, lihat contoh di bawah ini dan bandingkan dengan heading normal sebelumnya [Anda pasti akan melihat perbedaannya]


  
    Bootstrap Display Heading
    
    
    
    
    
    
  
  
    

      
Display 1

      
Display 2

      
Display 3

      
Display 4
_

Bootstrap Teks Sekunder

Selanjutnya adalah mengenai secondary text. Biasanya secondary text ditempatkan setelah heading untuk memberi penjelasan mengenai heading yang kita buat. Dalam bootstrap 4 secondary text dibuat dengan menggunakan tag . Perhatikan contoh script dibawah:


  
    Secondary Text
    
    
    
    
    
    
  
     
    
h1 heading secondary text

    
h2 heading secondary text

    
h3 heading secondary text

    
h4 heading secondary text

    h5 heading secondary text
    h6 heading secondary text

Teks Sorotan Bootstrap

Pada bootstrap juga terdapat tag yang digunakan untuk membuat highlight text atau text dengan background kuning [biasanya] yaitu tag . Sekedar info untuk membuat highlight text teman – teman juga dapat membuat nya dengan menggunakan CSS tanpa tag yaitu dengan menambahkan style=”background-color: #FFFF00″. Lebih jelasnya perhatikan script dibawah:


  
    Bootstrap Example
    
    
    
    
    
    
  
  
   highlight text dengan tag mark 

   highlight text tanpa tag mark

Tag tipografi lainnya

Selain tag diatas, ada beberapa tag lain yang biasa digunakan dalam tipografi sebuah website yaitu

TagFungsiuntuk menandai singkatan atau akronim [text akan mempunyai garis putus-putus dibawahnya]
untuk menandai text atau kontent kutipan atau berasal dari sumber lainuntuk menjelaskan deskripsi konten bisa juga digunakan untuk list seperti