bootstrap笔记之——列表

一、列表

  1、无序列表<ul>

    给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。除了项目编号之外,还将列表默认的左边内距清0了。

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

  2、有序列表<ol>

  3、内联列表

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

.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}
.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

  4、定义列表

<dl>
    <dt>北京</dt>
    <dd>北京是中国的首都,是政治文化集中地</dd>
</dl>
<dl>
    <dt>上海</dt>
    <dd>上海号称东方的巴黎</dd>
</dl>

  5、水平定义列表

  水平定义列表就像内联列表一样,Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。

  此处添加了一个媒体查询。也就是说,只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式:

  1、将dt设置了一个左浮动,并且设置了一个宽度为160px

  2、将dd设置一个margin-left的值为180px,达到水平的效果

  3、当标题宽度超过160px时,将会显示三个省略号

@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dl-horizontal dd {
    margin-left: 180px;
  }
}

  

时间: 2024-10-20 02:46:35

bootstrap笔记之——列表的相关文章

python笔记之列表和元组

pyhton的列表和元组,说白了其实就是一种数据结构,只是在python当中更加方便的去操作而已.. 1.序列 其实字符串就是采取序列的方式的: string = "hello" print string[0] 结果为:h 对比其他编程语言,python还有一个负值索引的概念: 序列的分片: first = [0,1,2,3,4,5,6,7,9] print first[1:6:2] 针对first[1:6:2]这条语句: 1代表的起始索引,不写,默认为0 6代表结束索引,不写默认为所

bootstrap -- 文字、列表

文字 <small></small>:呈现小号字体效果. <big></big>:程序大号字体效果 <abbr></abbr>: 标签指示简称或缩写.使用全局的 title 属性,这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本. <address> </address>:在网页上显示联系信息.由于 <address> 默认为 display:block;,您

Python笔记_01列表 和元祖

Python笔记 第一章 列表和元祖 1.通用序列操作 所有序列都可以进行某些特定操作,包括:索引(indexing).分片(slicing).加(adding).乘(multiplying)以及检查某元素是否属于列表成员. 迭代:依次对序列中的每个元素重复执行某些操作. 序列的索引:通过元素在列表中的位置可以定位到该元素,这就是列表的索引,使用类似于list[0]对元素进行索引,索引0指向第一个元素.也可使用负数对元素进行索引,使用负数对元素索引时,列表中的最后一个元素由-1表示,例如list

Bootstrap学习之列表组详解

列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件.本文将详细介绍Bootstrap列表组相关内容,一起来看看吧,希望对大家学习Bootstrap有所帮助. 基础列表组 基础列表组,看上去就是去掉了列表符号的列表项,并且配上一些特定的样式.在Bootstrap框架中的基础列表组主要包括两个部分: ?  list-group:列表组容器,常用的是ul元素,当然也可以是ol或者div元素 ?  list-group-item:列

lPerl 学习笔记-列表和数组

笔记来自<<Perl语言入门第5版>> 1. Perl中列表指标量的有序集合,数组则是存储列表的变量, 这两个术语经常混用,不过更精确地说,列表指数据,而数组指变量.数组的表示用 @my_array,因为Perl觉得@rray 看起来像array,正如 $calar 看起来像时scalar 标量变量一样. 2.    数组下标从0开始,数组或列表中的每个元素都时单独的标量变量,拥有单独的标量值,有序的.每个元素都有整数作为下标索引.由于每个元素相互独立,所以列表或数组中的元素类型可

Bootstrap笔记合集

一. 为了简化操作,方便使用,Bootstrap通过定义四个类名来控制文本的对齐风格: ?   .text-left:左对齐 ?   .text-center:居中对齐 ?   .text-right:右对齐 ?   .text-justify:两端对齐 用法: <p class="text-left">我居左</p><p class="text-center">我居中</p><p class="tex

Bootstrap select(选择列表)

当您想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项,则使用选择框 1.使用<select>展示列表选项 2.使用multiple="multiple"允许用户选择多个选项 实例: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> &l

bootstrap 笔记01

bootstrap源码样式: 移除body的margin声明设置body的背景色为白色为排版设置了基本的字体.字号和行高设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式 1,<small> bootstrap.css文件中第407行~第443行2, 段落(正文文本) bootstrap.css文件中第274行~280行*/3,强调内容lead bootstrap.css文件第470行~480行*/除此之外,Bootstrap还通过元素标签:<small>.

Bootstrap组件之列表组

.list-group--指定ul/div元素为列表组组件: .list-group-item--指定元素为列表组的列表项: .list-group-item-success..list-group-item-info..list-group-item-warning..list-group-item-danger--设置列表项的情境效果: .active--设置列表项为激活状态: .disabled--设置列表项为禁用状态: .list-group-item-heading--用于设置列表项的