给大家分享下Bootstrap框架中列表与代码样式相关的知识

1、列表

(1)无序列表

<ul>
  <li>CN217编程</li>
 </ul>

注意:ul、ol在Bootstrap里样式下为:margin-top:0;margin-bottom:10px;

(2)有序列表

<ol>
  <li>CN217编程</li>
 </ol>

(3)去点列表

<ol  class="list-unstyled"><!--去点-->
  <li>CN217编程</li>
 </ol>

effect picture:(1)、(2)、(3)

(4)内联列表

<ul>
  <li><a href="#">CN217编程</a></li>
  <li><a href="#">CN217编程</a></li>
  <li><a href="#">CN217编程</a></li>
  <li><a href="#">CN217编程</a></li>
  <li><a href="#">CN217编程</a></li>
</ul>

<ul   class="list-inline">
  <li><a href="#">CN217编程</a></li>
  <li><a href="#">CN217编程</a></li>
  <li><a href="#">CN217编程</a></li>
  <li><a href="#">CN217编程</a></li>
  <li><a href="#">CN217编程</a></li>
</ul>

Effect Picture:

(5)dl列表

<dl>
  <dt>JavaScript</dt><!--Bootstrap把dt的缩进取消了-->
  <dd>JavaScript是一种很有意思的语言</dd>
  <dt>JavaScript</dt>
  <dd>JavaScript是一种很有意思的语言</dd>
  <dt>JavaScript</dt>
  <dd>JavaScript是一种很有意思的语言</dd>
</dl>

(6)dl水平列表

<dl  class="dl-horizontal"><!--前面给标题后面给出解释-->
  <dt>JavaScript</dt>
  <dd>JavaScript是一种很有意思的语言</dd>
  <dt>JavaScript</dt>
  <dd>JavaScript是一种很有意思的语言</dd>
  <dt>JavaScript</dt>
  <dd>JavaScript是一种很有意思的语言</dd>
</dl>

注意:bootstrap把dt的缩进给取消了,dl用于前面给标题后面给出解释

Effect Picture:(5)(6)

2、代码

(1)<code>标签:显示单行内联代码

code在Bootstrap里的用法:<code>meta name="viewport" content="width=device-width, initial-scale=1"</code>

(2)<kbd>标签:显示用户输入代码

输入标签kbd的用法:<kbd>Ctrl+V</kbd><br/><br/>

(3)<pre>标签:多行代码块

<pre>
  meta name="viewport" content="width=device-width, initial-scale=1"
  link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"
</pre>

(4)<var>变量

<var>i</var> 默认是斜体

(5)<samp>程序结果

源码文件下载:Bootstrap列表与代码样式.zip

Bootstrap列表与代码样式(附源码)--Bootstrap的更多相关文章

  1. JavaScript DOM高级程序设计 3.6 实例 将HTML代码转换成DOM代码(附源码)--我要坚持到底!

    作为一名Web开发者,最讨厌的事情就是重复性任务,摆脱乏味的日常重复性事物的一种方法,是借助可重用的对象或者说与你现在建立的ADS库类似的库,另外一种让事情变得有意思,且能够加速开发进程的方式是编写能 ...

  2. 用Python生成组织机构代码,附源码

    #!/usr/bin/python import random def haoma(): ww = [3,7,9,10,5,8,4,2]#suan fa yin zi cc = [] dd=0 for ...

  3. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  4. 13行代码实现:Python实时视频采集(附源码)

    一.前言 本文是<人脸识别完整项目实战>系列博文第3部分:程序设计篇(Python版),第1节<Python实时视频采集程序设计>,本章内容系统介绍:基于Python+open ...

  5. leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  6. 基于Python接口自动化测试框架+数据与代码分离(进阶篇)附源码

    引言 在上一篇<基于Python接口自动化测试框架(初级篇)附源码>讲过了接口自动化测试框架的搭建,最核心的模块功能就是测试数据库初始化,再来看看之前的框架结构: 可以看出testcase ...

  7. arcgis api 3.x for js 共享干货系列之二自定义 Navigation 控件样式风格(附源码下载)

    0.内容概览 自定义 Navigation 控件样式风格 源码下载 1.内容讲解 arcgis api 3.x for js 默认的Navigation控件样式风格如下图:这样的风格不能说不好,各有各 ...

  8. C#进阶系列——一步一步封装自己的HtmlHelper组件:BootstrapHelper(三:附源码)

    前言:之前的两篇封装了一些基础的表单组件,这篇继续来封装几个基于bootstrap的其他组件.和上篇不同的是,这篇的有几个组件需要某些js文件的支持. 本文原创地址:http://www.cnblog ...

  9. 使用 SVG 制作单选和多选框动画【附源码】

    通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...

随机推荐

  1. springboot配置swagger2

    .在pom.xml里添加jar包: <dependency> <groupId>io.springfox</groupId> <artifactId>s ...

  2. KKlist团队目录

    KKlist团队目录 一.Daily Scrum Meeting[Alpha] 4.22 day one 4.23 day two 4.24 day three 4.25 day four 4.26 ...

  3. Swing-JSlider用法-入门

    JSlider是Swing中的滑块控件,在交互过程中用户可拖动它来实现数值的调整.它具有3个基本参数,分别为:最小值.最大值和初始值,如果不指定数值,则默认值分别为:0,100,50.滑块的值发生改变 ...

  4. 201521123074 《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 Q1.List中指定元素的删除(题目4-1) 1.1 实验总结 用Arrar ...

  5. 201521123057 《Java程序设计》第3周学习总结

    1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...

  6. 201521123093 java 第一周总结

    201521123093 <Java程序设计> 第一周学习总结 1.本周学习总结 (1)第一次开始接触java语言,java的用法和C不太一样.在编程序时语句比以前的长. (2)学会了使用 ...

  7. Java课程设计—象棋

    1. 团队名称.团队成员介绍 团队名称:WY 团队成员: 吴慧婷[组长] 201521123094 网络1514 姚佳希 201521123042 网络1512 2 项目git地址 Java课程设计 ...

  8. 201521123110《Java程序设计》第11周学习总结

    1. 本周学习总结 2. 书面作业 1.互斥访问与同步访问 1.1 除了使用synchronized修饰方法实现互斥同步访问,还有什么办法实现互斥同步访问(请出现相关代码)? 1.2 同步代码块与同步 ...

  9. Java:设计类的继承关系时的技巧

    继承设计的技巧: (1)将公共操作和域放置在超类 (2)不要使用受保护的域 有些程序员认为,将大多数的实例域定义为protected是一个不错的主意,只有这样,子类才能够在需要的时候直接访问他们.然而 ...

  10. MyEclipse 快捷键问题

    解决Myeclipse提示快捷键Alt+/不可用问题 http://blog.163.com/cd-key666/blog/static/648929422011229123826/ 解决Myecli ...