bootstrap-无样式列表

说明

.list-unstyled移除了默认的 list-style 样式和左侧外边距的一组元素

示例

<!DOCTYPE html>
<html lang="zh-CN">
  	<head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    	<title>Bootstrap 101 Template</title>

    	<!-- Bootstrap -->
    	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    	<!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
    	<!--[if lt IE 9]>
      		<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      		<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    	<![endif]-->
  	</head>
  	<body>
	  	<div class="container">
	  		<ul class="list-unstyled">
				<li>Lorem ipsum dolor sit amet</li>
				<li>Consectetur adipiscing elit</li>
				<li>Integer molestie lorem at massa</li>
			</ul>
	    </div>

    	<!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    	<!-- Include all compiled plugins (below), or include individual files as needed -->
    	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  	</body>
</html>

输出

时间： 2024-10-08 16:28:52

bootstrap-无样式列表的相关文章

[Bootstrap]全局样式（二）

具体排版 1.标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small font-size margin-top margin-bottom h1 36px 20px 10px h2 30px 2

Bootstrap系列 -- 7. 列表排版方式

一. 去点列表 1. 使用class=list-unstyled <ul > <li>无序列表项目</li> <li>无序列表项目</li> <li>无序列表项目</li> <li>无序列表项目</li> <li>无序列表项目</li> </ul> <ul class="list-unstyled"> <li>无序列表项

bootstrap -- 文字、列表

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

吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：列表

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 列表</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&quo

[打印管理器]读取样式列表失败:Invalid variant operation

报错: (1)读取样式列表失败:Invalid variant operation (2)保存模板时出错原因: (1)样式文件RPDB.mdb损坏 (2)dao360.dll未注册成功,或需要在特殊路径下注册,大多是xp sp3系统或者电脑安装版的操作系统(裁剪版) 解决办法: (1)备份打印管理器print文件夹,用不报错的样式文件替换后查看,如果替换后不报错则之前的样式文件损坏:在安装access数据库的电脑,打开样式文件RPDB.mdb进行修复工具->数据库实用工具->压缩和修复数据

无样式简单分页

只需要返回的类型为PageList均可调用此分页,不需要引用,所以我叫他简单分页,样式简单,虽然没有其他的样式花哨,但用起来也很顺手,所以也记一下,以便以后方便使用吧代码(写在需要分页的位置) 1 <div id="Pager"> 2 <div> 3 当前第 @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) 4 页共 @Model.PageCount 页 5 @if (Model.

bootstrap笔记之——列表

一.列表 1.无序列表<ul> 给无序列表添加一个类名".list-unstyled",这样就可以去除默认的列表样式的风格.除了项目编号之外,还将列表默认的左边内距也清0了. .list-unstyled { padding-left: 0; list-style: none; } 2.有序列表<ol> 3.内联列表 Bootstrap像去点列表一样,通过添加类名".list-inline"来实现内联列表,简单点说就是把垂直列表换成水平列表,

Bootstrap学习之列表组详解

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

Bootstrap 基本样式

基本样式 <head> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script> <link href="http://libs.baidu.com/boot

CSS样式-列表

CSS列表属性,允许你放置和改变列表项标志,或者将图像作为列表项标志. 1)list-style-type list-style-type属性用于修改列表项的标志类型.无序属性值有:disc,circle,square,none. <html> <head> <style type="text/css">  ul.disc {list-style-