bootstrap 表格、表单、面板、模态框-阿里云开发者社区

开发者社区> yichudu> 正文

bootstrap 表格、表单、面板、模态框

简介: 表格 .table-responsive用来创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。.table-hover的效果是鼠标所在行底色变灰。 <table class="table table-hover"> <caption>宝丰一高2011高考成绩表(理科前1000)</capt
+关注继续查看

表格

.table-responsive用来创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

.table-hover的效果是鼠标所在行底色变灰。

<table class="table table-hover">
  <caption>宝丰一高2011高考成绩表(理科前1000)</caption>
   <thead>
	<tr>
		<th>考生号</th>
		<th>姓名</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat='element in gaoKaoScoreList'>
		<td>{{element.no}}</td>
		<td>{{element.name}}</td>
	</tr>
	</tbody>
</table>


表单

.form-control的效果为输入框获得焦点时会有边缘发光效果。

<form>
	<div class="form-group">
		<label>Email address</label> <input type="email" class="form-control"
			placeholder="Enter email"> <label>Password</label> <input
			type="password" class="form-control" placeholder="Password">
		<label>禁止输入</label> <input type="text" class="form-control" disabled>
		<div class="checkbox">
			<label> <input type="checkbox"> i like studying
			</label>
		</div>
	</div>
	<div class="form-group">
		<label>like what?</label> <select class="form-control">
			<option>peach</option>
			<option>apple</option>
			<option>orange</option>
		</select>
	</div>
</form>

代码对应的效果见图1.


图1:bootstrap 表单效果

面板

<div class="panel panel-info">
  <div class="panel-heading">Panel  title</div>
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

显示效果见图2.


图2:bootstrap panel效果

模态框

模态框,Modal,是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
您可以切换模态框(Modal)插件的隐藏内容:通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。


除了用按钮的toggle效果,话可以直接用js控制。

$('.modal').modal('show');//调出模态框。

$('#myModalId').modal('hide');//隐藏模态框

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10089 0
【新模板推荐】放下表格——开箱即用的新冠疫苗接种统计模板来了!
钉钉宜搭模板市场上线一款全新模板:新冠疫苗接种统计,支持组织内成员在线填报接种信息、可视化呈现统计结果,还能配置消息,实现自动提醒。
318 0
【BootStrap】简单聊一聊CSS全局样式和表格样式-附有源码
转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 CSS全局样式 1、布局容器类样式:.container 和 .container-fluid .container 固定宽度并且具有响应式。
1267 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13892 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11893 0
2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板
本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:APP的管理后台,电商网站,CMS后台管理系统,CRM系统界面,SAAS系统界面,Web应用程序等等。
981 0
+关注
619
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载