EasyCVR wpf extjs plugins ios4 seo vue提交表单 网络营销视频 seo计费系统 hadoop源码 java反射方法 js教程文档 ai如何导出矢量图 oracle数据库创建表空间 python入门 python迭代器 python字典类型 python连接mysql数据库 python入门指南 java开发环境搭建 java中的继承 java运算 java集合类型 abaqus最新版本 路由器有没有辐射 c语言指数函数 我的世界透视 tomcat修改端口 图片转pdf免费软件 网页自动点击 lrc软件 计划任务软件 羽化快捷键 战法装备 逆战丛林魅影 暴力猴 手机刷机助手 固态硬盘有什么用 接口自动化测试框架 ae渲染设置
当前位置: 首页 > 学习教程  > 

bootstrap记忆技巧

2020/10/16 17:43:26 文章标签: bootstrap文本框

基础class.code来显示单行内联代码.pre来显示多行块代码.kbd来显示用户输入代码.pre-scrollable高度超出340px,就会在Y轴出现滚动条 表格class .table基础表格margin-bottom:20px,在thead底部2px的浅灰实线,每个单元格顶部1px的浅灰实线.tabl…

基础class

.code来显示单行内联代码
.pre来显示多行块代码
.kbd来显示用户输入代码
.pre-scrollable高度超出340px,就会在Y轴出现滚动条

表格class

.table基础表格margin-bottom:20px,在thead底部2px的浅灰实线,每个单元格顶部1px的浅灰实线
.table-striped:斑马线表格,隔行有一个浅灰色的背景色
.table-bordered:带边框的表格,所有单元格有1px的边框
.table-hover:鼠标悬停在表格的行上,有高亮的背景色
.table-condensed:将单元格的内距由8px调至5px
.table-responsive:设置类名.table-responsive的容器,将<table class="table">置于这个容器中

表格行的类

.active表示当前活动信息
.success成功或正确的行为
.info表示中立信息或行为
.warning表示警告
.danger表示危险活着错误行为

除了.active,其他四个类名应与.table-hover配合

表单

.form-horizontal水平表单效果,配合Bootstrap框架的网格系统;设置表单控件padding和margin值;改变“form-group”的表现形式,类似于网格系统的“row”
在Bootstrap中使用input时也必须添加type类型
为了让控件在各种表单风格中样式不出错,需要添加.form-control
多行选择设置multiple属性的值为multiple
rows定义高度,cols设置宽度。.form-control,则无需cols
checkbox还是radio都使用label包
如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”

固定导航条

页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容,我们需要在body上做一些处理:

?
1
2
3
4
5
6
7
body {
padding-top: 70px; /*有顶部固定导航条时设置*/
padding-bottom: 70px; /*有底部固定导航条时设置*/
}
<div class= "navbar navbar-default navbar-fixed-top" role= "navigation" >
 …
</div>

其实除了这种解决方案之外,我们还有其他的解决方法,把固定导航条都放在页面内容前面:

?
1
2
3
4
<div class= "navbar navbar-default navbar-fixed-bottom" role= "navigation" >
 …
</div>
<div class= "content" >我是内容</div>

在文件中添加下列样式代码:

?
1
2
3
4
5
6
.navbar-fixed-top ~ .content {
padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
padding-bottom: 70px;
}

以上所述是小编给大家介绍的Bootstrap的class样式小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

 

转载于:https://www.cnblogs.com/xiaoxiaoyao/p/8604482.html


本文链接: http://www.dtmao.cc/news_show_300040.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?