讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > html教程 > 正文

Bootstrap学习笔记（3）--表格表单图片 - tuohaibei

php中文网
发布： 2016-05-20 16:50:46
原创
1809人浏览过
Bootstrap表格
  表格类：
   .table只会在表行之间增加横线;
   .table-striped会在表格行之间增减斑马线;
   .table-hover会给表设置鼠标悬停状态;
   .table-border会为所有的表格添加边框;
   .table-condensed让表格更加紧凑;
 tr,td,th类
   .active让某一行单元格或者行处于激活状态;
   .success表示成功的样式;
   .warning表示警告的样式;
   .danger表示危险的样式;
   .info表示信息的样式;
 

  表单类：

  创建表单的基本步骤
 (1)首先向form元素添加role="form";
 (2)把标签和控件放在一个带有class .form-group的
中，这是获取最佳间距锁必须的;
 (3)向所有的文本元素
  几种表单格式；
  垂直表单-采用以上样式创建的普通表单;
  水平表单-在form中增加class .form-horizontal；
  内联表单-在form中增加class .form-inline,对于标签元素可以使用.sr-only来隐藏该标签元素（label）
  支持的表单控件:
  input,textarea,checkbox,radio,select(可以增加multiple实现多选)
  这里特别说明一点,实现内联的复选框或者单选按钮使用checkbox-line属性.
  如果想在想放置纯文本那么可以对

元素使用.form-control-static

百度文心百中
百度文心百中

百度大模型语义搜索体验中心

百度文心百中 263
查看详情 百度文心百中
  表单控件状态:
  可以对div设置has-warning,has-error,has-success来显示内部控件的状态.
  可以设置.input-large或者.input-sm来显示控件的大小,或者使用col-lg-*来显示控件占的列数.
  可以使用.class-bloc来显示一段内容的解释.
  图片:
  • .img-rounded：添加 border-radius:6px 来获得图片圆角。
  • .img-circle：添加 border-radius:50% 来让整个图片变成圆形。
  • .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
  • .img-responsive 图片响应式 (将很好地扩展到父元素)

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：[css3] 看博客学习别人的旋转的星球 - 陶士涵 下一篇：这可能是史上最全的CSS自适应布局总结 - 茄果
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
开始学习html5步骤_基础知识与开发工具准备【指南】 系统性掌握HTML5开发需依次完成五步：一、构建语义化文档结构，含DOCTYPE声明、lang属性及UTF-8编码；二、配置VSCode与LiveServer插件实现高效编辑预览；三、用http-server搭建本地HTTP环境以支持新API；四、通过video、canvas、localStorage验证核心特性；五、依托WHATWG标准与MDN权威文档深入学习。
2025-12-18 21:08:02
340
HTML如何隐藏敏感内容_CSS与脚本控制方案【指南】 隐藏网页敏感内容有五种技术方案：一、CSSdisplay:none完全移除元素；二、visibility:hidden保留占位但不可见；三、clip-path裁剪实现视觉隐藏且兼顾无障碍；四、JavaScript动态替换为掩码；五、服务端预处理+前端条件渲染，确保源头不暴露。
2025-12-18 21:05:02
686
html5底图如何设置_设置HTML5页面底部背景图【底部】 可通过五种CSS方法为HTML5页面底部设置背景图像：一、footer元素配背景样式；二、body伪元素::after绝对定位；三、Flex布局推footer至视口底；四、position:fixed实现固定横幅；五、渐变叠加多重背景融合效果。
2025-12-18 21:03:30
640
打出如何出现《 html》_在代码中正确显示HTML标签符号【标签】 浏览器默认解析HTML标签，需用HTML实体编码（如）、组合、JavaScripttextContent、CSScontent属性或服务端转义（如PHPhtmlspecialchars）使其显示为纯文本。
2025-12-18 21:01:51
239
TXT文档如何转为HTML格式_文本标记转换方法【教程】 TXT转HTML有四种方法：一、手动添加HTML标签；二、用在线工具快速转换；三、Python脚本批量处理；四、通过Markdown中转生成HTML。
2025-12-18 20:59:14
671
html5无序如何定义_HTML5无序列表创建与定义【列表】 HTML5使用和创建语义化无序列表，默认实心圆点标记；可通过list-style-type切换符号，嵌套实现多级结构，CSS移除符号并用背景图定制，结合ARIA属性增强可访问性。
2025-12-18 20:52:02
489
HTML如何实现打字机效果_CSS动画逐步显示教程【技巧】 可通过CSS动画、JavaScript动态插入、CSS伪元素光标或mask-image遮罩四种方法实现打字机效果：一用width+steps逐显；二用定时器逐字添加；三用::after伪元素模拟闪烁光标；四用mask-image线性遮罩推进。
2025-12-18 20:49:02
772
html运行到浏览器怎么运行_浏览器运行html文件方法【教程】 可通过拖拽文件到浏览器窗口快速预览，支持主流浏览器；2.使用浏览器菜单中的“打开文件”功能选择并加载HTML文档；3.双击文件利用系统默认关联程序直接在浏览器中打开；4.在地址栏输入file://加文件路径精准访问本地HTML文件。
2025-12-18 20:47:02
319
HTML如何打出爱心符号_特殊字符代码实现【实操】 可在HTML中通过五种方式显示爱心符号：一、HTML实体编码（如❤）；二、CSSUnicode转义（如content:"\2764"）；三、SVG内联绘制；四、FontAwesome等Web字体图标；五、JavaScript动态插入。
2025-12-18 20:46:02
450
如何介绍HTML语言特点_基础概念阐述指南【解析】 HTML是标记语言而非编程语言，以开头，用语义化标签（如）构建结构，依赖属性（class/id/alt）扩展功能，需规范嵌套，并与CSS、JavaScript协同实现网页功能。
2025-12-18 20:37:02
351
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

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

  • PHP学习

  • 技术支持

  • 返回顶部