BootStrap框架入门到精通视频课程 3：Bootstrap列表和图片

Bootstrap列表和图片

本节课所讲内容：

1.Bootstrap列表

2.BootStrap图片

 

主讲教师：Head老师

一. Bootstrap列表

1.无序列表、有序列表

无序列表和有序列表使用方式和我们平时使用的一样（无序列表使用ul，有序列表使用ol标签），在样式方面，Bootstrap只是在此基础上做了一些细微的优化（只是在margin上做了一些调整）

2.在Bootstrap中列表也是可以嵌套的。

<h5>普通列表</h5>

    <ul>

        <li>列表项目</li>

        <li>列表项目</li>

        <li>列表项目</li>

        <li>列表项目</li>

        <li>列表项目</li>

    </ul>

    <h5>有序列表</h5>

    <ol>

          <li>项目列表一</li>

          <li>项目列表二</li>

          <li>项目列表三</li>

    </ol>

    <h5>有序列表嵌套</h5>

    <ol>

        <li>有序列表</li>

        <li>

        有序列表

            <ol>

            <li>有序列表(2)</li>

            <li>有序列表(2)</li>

            </ol>

        </li>

        <li>有序列表</li>

</ol>

3.去点列表

Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

 <ul class="list-unstyled">

             <li>不带项目符号</li>

             <li>不带项目符号</li>

  </ul>

4.内联列表

        Bootstrap像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

 <ul class="list-inline">

            <li>W3cplus</li>

            <li>Blog</li>

            <li>CSS3</li>

            <li>jQuery</li>

            <li>PHP</li>

           </ul>

5.定义列表

对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。

          <dl>

                     <dt>head</dt>

                     <dt>teacher</dt>

                       <dt>study</dt>

          </dl>

二.BootStrap图片

图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：

 

1、img-responsive：响应式图片，主要针对于响应式设计

2、img-rounded：圆角图片

3、img-circle：圆形图片

4、img-thumbnail：缩略图片

 

使用方法：

 

使用方法非常简单，只需要在<img>标签上添加对应的类名

 

设置图片大小：

 

由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）

 

<img src="area-menu__8.jpg" class="img-responsive">

<img src="ad1.jpg" class="img-responsive">