Bootstrap的有序列表和無序列表

2018-09-08 10:56 更新

一、有序列表

語法:

<ol> 
  <li>...</li> 

</ol>



案例:

<ol> 
      <li>Lorem ipsum dolor sit amet</li> 
      <li>Consectetur adipiscing elit</li> 
      <li>Integer molestie lorem at massa</li> 
      <li>Facilisis in pretium nisl aliquet</li> 
      <li>Nulla volutpat aliquam velit</li> 
      <li>Faucibus porta lacus fringilla vel</li> 
      <li>Aenean sit amet erat nunc</li> 
      <li>Eget porttitor lorem</li> 
</ol> 


運(yùn)行結(jié)果:

bootstrap有序列表


提示和注釋:

提示:請使用 CSS 來定義列表和列表項目的類型。


可選的屬性

屬性描述
typeA
a
I
i
1
disc
square
circle
不贊成使用。請使用樣式取代它。
規(guī)定使用哪種項目符號。
valuenumber不贊成使用。請使用樣式取代它。
規(guī)定列表項目的數(shù)字。

list-style-type屬性:

none:不使用項目符號。
disc:實心圓。
circle:空心圓。
square:實心方塊。
demical:阿拉伯?dāng)?shù)字。
lower-alpha:小寫英文字母。
upper-alpha:大寫英文字母。
lower-roman:小寫羅馬數(shù)字。
upper-roman:大寫羅馬數(shù)字。


Bootstrap


二、無序列表


語法:


<ul> 
  <li>...</li> 
</ul>

案例:

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

運(yùn)行結(jié)果:

bootstrap無序列表


list-style-type屬性:

none:不使用項目符號。
disc:實心圓。
circle:空心圓。
square:實心方塊。
demical:阿拉伯?dāng)?shù)字。
lower-alpha:小寫英文字母。
upper-alpha:大寫英文字母。
lower-roman:小寫羅馬數(shù)字。
upper-roman:大寫羅馬數(shù)字。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號