11.Bootstrap构建页面PHP课件最新版摘要.pptx

Bootstrap构建页面 表格 Bootstrap提供了1种基础.table样式、4种附加样式（.table-striped、.table-bordered、.table-hover、.table-condensed）以及一个支持响应式布局的.table-responsive容器样式，假设我们有一个基本的table结构 table thead trth#/thth姓名/thth年龄/thth性别/th/tr /thead tbody trtd1/tdtd小明/tdtd20/tdtd男/td/tr trtd2/tdtd小丽/tdtd21/tdtd女/td/tr /tbody /table 基础样式 只需要给table标签添加上.table样式，表格立刻变得漂亮 table class=table … /table 附加样式 class=table table-striped 显示背景带条纹的表格 table-bordered 给表格添加上边框 table-hover 当鼠标悬停在某一行上时，行呈现高亮效果 table-condensed 紧凑表格，减少内边距 行样式 不仅有表格的样式，bootstrap还定义了tr的样式 .active 底色为灰色，表示当前行突出显示 .success 绿色，表示成功或正确 .info 蓝色，表示信息 .warning 黄色，表示警告 .danger 红色，表示危险或错误 当tr设置了这些行样式后，table-hover也会变为相应的颜色，譬如暗绿、深蓝…… 响应式表格 当屏幕宽度小于768px时，如果表格无法完全显示，一般都会换行，表格变长，使用响应式表格后，会自动出现横向的滚动条 table-responsive不是直接加载table标签上的，而是需要包住table标签 div class=table-responsive table class=table … /table /div 基础表单 任何表单项标签，只要添加了form-control样式，显示宽度会变成100%宽，圆角，聚焦时会边框会出现阴影，分别尝试下面的效果 input type=text class=form-control select class=form-control/select textarea class=form-control/textarea checkbox和radio checkbox和radio比较特殊，他们通常都需要和一些描述文字搭配使用，input外部都用label包住，并且在最外层用容器元素包住，并应用相应的.checkbox或者.radio样式 div class=checkbox labelinput type=checkbox足球/label /div div class=checkbox labelinput type=checkbox冰上曲棍球/label /div 内联表单 为form设置样式form-inline可以让表单在一行内显示，我们称之为内联表单 form class=form-inline div class=“form-group”input type=text class=form-control/div div class=“form-group”select class=form-control/select/div div class=“form-group”textarea class=form-control/textarea/div /form 注意，内联效果只能在768px以上的屏幕上显示，小于这个尺寸，仍然会折行显示 非内联表单 大多数情况下，我们并不想让表单在一行内显示，但是如果去掉了form-inline的样式，效果也并不是我们想象的那样 form label class=“control-label”姓名：/labelinput type=text class=form-control select class=form-control/select textarea class=form-control/textarea /form lable和input无法在一行内显示，这就需要我们使用横向表单来解决 横向表单 要使用横向表单，需要给form设置样式form-hozizontal，可是，这还不够，我们必须使用栅格系统来设置lable和input的并排布局 form class=form-horizontal div class=form-group label cl