首页 / js教程

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

    作者:PHP中文网2018-10-13 16:48:04

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

    一、列表组组件

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

    基本实例:

    		<ul class="list-group">
    			<li class="list-group-item">我是第一行</li>
    			<li class="list-group-item">我是第二行</li>
    			<li class="list-group-item">我是第三行</li>
    			<li class="list-group-item">我是第四行</li>
    		</ul>

    列表项加上勋章

    		<ul class="list-group">
    			<li class="list-group-item">我是第一行
    			<span class="badge">10</span>
    			</li>
    			<li class="list-group-item">我是第二行</li>
    		</ul>

    列表 链接和首选

    		<p class="list-group">
    			<a class="list-group-item active">我是第一行
    			<span class="badge">10</span>
    			</a>
    			<a class="list-group-item">我是第二行</a>
    			<a class="list-group-item">我是第三行</a>
    			<a class="list-group-item">我是第四行</a>
    		</p>

    第一行为首选状态


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

    按钮式列表

    		<p class="list-group">
    			<button class="list-group-item active">我是第一行
    			<span class="badge">10</span>
    			</button>
    			<button class="list-group-item">我是第二行</button>
    			<button class="list-group-item">我是第三行</button>
    			<button class="list-group-item">我是第四行</button>
    		</p>

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

    情景类

    		<ul class="list-group">
    			<li class="list-group-item list-group-item-danger">我是第一行</li>
    			<li class="list-group-item list-group-item-info">我是第二行</li>
    		</ul>

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

    自定义内容

    			<p href="#" class="list-group-item active">
    
    				<h3>我是标题</h3>
    				<p>我是一段文本</p>
    
    			</p>

    二、面板组件

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

    基本实例:panel

    		<p class="panel panel-success">
    
    			<p class="panel-body">这里是内容区域</p>
    
    		</p>

    带标题的面板:panel-heading

    		<p class="panel panel-success">
    
    			<p class="panel-heading">这个是标题啊</p>
    			<p class="panel-body">这里是内容区域</p>
    
    		</p>

    设置标题元素:panel-title

    		<p class="panel panel-success">
    
    			<p class="panel-heading">
    				<h3 class="panel-title">这是标题</h3>			
    			</p>
    			<p class="panel-body">这里是内容区域</p>
    
    		</p>

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

    带注脚的面板:panel-footer

    		<p class="panel panel-success">
    
    			<p class="panel-heading">这是标题</h3></p>
    			<p class="panel-body">这里是内容区域</p>
    			<p class="panel-footer">这里是注脚区域</p>
    
    		</p>

    情景效果

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

    表格类面板

    		<p class="panel panel-warning">
    
    			<p class="panel-heading">这是标题</h3></p>
    			<p class="panel-body">这里是内容区域</p>
    			<table class="table">
    				<tr>
    					<td>1</td>
    					<td>2</td>
    					<td>3</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>2</td>
    					<td>3</td>
    				</tr>
    			</table>
    
    		</p>

    列表类面板

    		<p class="panel panel-warning">
    
    			<p class="panel-heading">这是标题</h3></p>
    			<p class="panel-body">这里是内容区域</p>
    
    			<ul class="list-group">
    				<li class="list-group-item">1</li>
    				<li class="list-group-item">2</li>
    				<li class="list-group-item">3</li>
    				<li class="list-group-item">4</li>
    				<li class="list-group-item">5</li>
    			</ul>
    
    		</p>

    二、响应式嵌入组件

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

    这些规则可以直接适用于<iframe>,<embed>,<video>,<object>元素。

    		<p class="embed-responsive embed-responsive-4by3"><!--这里可以修改比例,16:9或是4:3-->
    
    			<!--插入到这里面的媒体都会按照指定的比例缩放-->
    
    		</p>

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

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

PHP中文网

未登录