Bootstrap排版列表

!DOCTYPE htmlhtmlheadtitleTry v1.2 Bootstrap Online/titlelink href=/bootstrap/css/bootstrap.min.css rel=stylesheet

编程学习网为您整理以下代码实例,主要实现:Bootstrap排版列表,希望可以帮到各位朋友。

<!DOCTYPE HTML>
<HTML>
<head>
   <Title>Try v1.2 bootstrap Online</Title>
   <link href="/bootstrap/CSS/bootstrap.min.CSS" rel="stylesheet">
   <script src="/scripts/jquery.min.Js"></script>
   <script src="/bootstrap/Js/bootstrap.min.Js"></script>
</head>
<body>

<h4>Example of Ordered List</h4>
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

<h4>Example of Unordered List</h4>

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Unstyled List</h4>

<ul class = "List-unstyled">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Inline List</h4>

<ul class = "List-inline">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of DeFinition List</h4>

<dl>
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

<h4>Example of Horizontal DeFinition List</h4>

<dl class = "dl-horizontal">
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

</body>
</HTML>

本文标题为:Bootstrap排版列表

基础教程推荐