登录  /  注册
首页 > web前端 > js教程 > 正文

BootStrap中的列表组组件,面板组件,响应式嵌入组件(图文详解)

青灯夜游
发布: 2018-10-13 16:48:04
转载
2143人浏览过

本篇文章就给大家介绍bootstrap中的列表组组件,面板组件,响应式嵌入组件。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。如果大家想要获取和学习更多的bootstrap相关视频教程也可以访问:bootstrap教程

一、列表组组件

列表组组件用于显示一组列表的组件

基本实例:

		
登录后复制
登录后复制
登录后复制
  • 我是第一行
  • 我是第二行
  • 我是第三行
  • 我是第四行

列表项加上勋章

		
登录后复制
登录后复制
登录后复制
  • 我是第一行 10
  • 我是第二行

列表 链接和首选

		<p>
			<a>我是第一行
			<span>10</span>
			</a>
			<a>我是第二行</a>
			<a>我是第三行</a>
			<a>我是第四行</a>
		</p>
登录后复制

第一行为首选状态


第三行是鼠标悬停在上面的时候的状态

按钮式列表

		<p>
			<button>我是第一行
			<span>10</span>
			</button>
			<button>我是第二行</button>
			<button>我是第三行</button>
			<button>我是第四行</button>
		</p>
登录后复制

样式和超链接的列表类似。

情景类

		
登录后复制
登录后复制
登录后复制
  • 我是第一行
  • 我是第二行

可以设置的颜色: success , warning,danger,info

自定义内容

			<p>

				</p><h3>我是标题</h3>
				<p>我是一段文本</p>

			
登录后复制

二、面板组件

面板组件是一个存放内容的容器组件

基本实例:panel

		<p>

			</p><p>这里是内容区域</p>

		
登录后复制

带标题的面板:panel-heading

		<p>

			</p><p>这个是标题啊</p>
			<p>这里是内容区域</p>

		
登录后复制

设置标题元素:panel-title

		<p>

			</p><p>
				</p><h3>这是标题</h3>			
			
			<p>这里是内容区域</p>

		
登录后复制

和以上效果类似,标题字体大一号而已

带注脚的面板:panel-footer

		<p>

			</p><p>这是标题</p>
			<p>这里是内容区域</p>
			<p>这里是注脚区域</p>

		
登录后复制

情景效果

panel panel- default / success / warning / danger / info / primary 

表格类面板

		<p>

			</p><p>这是标题</p>
			<p>这里是内容区域</p>
			
登录后复制
1 2 3
1 2 3

列表类面板

		<p>

			</p><p>这是标题</p>
			<p>这里是内容区域</p>

			
登录后复制
  • 1
  • 2
  • 3
  • 4
  • 5

二、响应式嵌入组件

根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例,从而让浏览器自动确定内容的尺寸,能够在各种设备上缩放

这些规则可以直接适用于

		<p><!--这里可以修改比例,16:9或是4:3-->

			<!--插入到这里面的媒体都会按照指定的比例缩放-->

		</p>
登录后复制

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程jQuery视频教程bootstrap视频教程

以上就是BootStrap中的列表组组件,面板组件,响应式嵌入组件(图文详解)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:CSDN网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号