当前位置: 开发笔记 > 前端 > 正文

学习使用bootstarp基本控件（table、form、button）_javascript技巧

作者：346182773_20da31 | 来源：互联网 | 2018-06-18 16:23

这篇文章主要教会大家学习使用bootstarp基本控件，如table、form、button控件，感兴趣的小伙伴们可以参考一下

bootstrap为我们定义了简洁易用的样式，我们只需要很少的样式指定，就可以完成简约优雅的页面展示。
本篇主要介绍以下几个基本控件：
1. table
2. form
3. button

1. 表格（table）依旧使用

来表现表格。有如下的类来控制table的属性， table样式默认会占满父容器

标题一	标题二	标题三
1	2	3
4	5	6

将任何.table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大768px宽度时，水平滚动条消失。

2. 表单form, 有如个几种样式定义

lable与控件要用form-group类型的p包起来，默认表单如下

Email address

Password

Check me out

内联表单，为label指定sr-only类别，可隐藏掉标签，但必须不可省略lable.

Email address

Password

Check me out

水平类型的表单，要为lable与标签组指定长度，采用栅格系统的布局方式。 label右对齐，标签组左对齐。

Email address

Password

Check me out

form表单验证，bootstrap3支持表单的自定义验证。加入req uired表示表单必填，node.setCustomValidity可以设置表单的自定义验证

Email address

Password

Password2

Check me out

3. button的样式

使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮，给按钮添加.btn-block可以使其充满父节点100%的宽度，而且按钮也变为了块级（block）元素，、 Link

以上就是本文的全部内容，希望对大家的学习有所帮助。

推荐阅读

容器
Java容器中的compareto方法排序原理解析

本文从源码解析Java容器中的compareto方法的排序原理，讲解了在使用数组存储数据时的限制以及存储效率的问题。同时提到了Redis的五大数据结构和list、set等知识点，回忆了作者大学时代的Java学习经历。文章以作者做的思维导图作为目录，展示了整个讲解过程。 ... [详细]

蜡笔小新 2023-12-14 13:53:31
容器
Spring特性实现接口多类的动态调用详解

本文详细介绍了如何使用Spring特性实现接口多类的动态调用。通过对Spring IoC容器的基础类BeanFactory和ApplicationContext的介绍，以及getBeansOfType方法的应用，解决了在实际工作中遇到的接口及多个实现类的问题。同时，文章还提到了SPI使用的不便之处，并介绍了借助ApplicationContext实现需求的方法。阅读本文，你将了解到Spring特性的实现原理和实际应用方式。 ... [详细]

蜡笔小新 2023-12-14 03:24:19
容器
docker增加restart=always, docker重启后自动启动容器的方法

本文介绍了在运行docker容器时如何添加参数来保证每次docker服务重启后容器也自动重启的方法，以及如何使用命令来更新已启动的容器。 ... [详细]

蜡笔小新 2023-12-14 03:04:27
json
Hyperledger Fabric外部链码构建与运行的开发笔记

本文介绍了Hyperledger Fabric外部链码构建与运行的相关知识，包括在Hyperledger Fabric 2.0版本之前链码构建和运行的困难性，外部构建模式的实现原理以及外部构建和运行API的使用方法。通过本文的介绍，读者可以了解到如何利用外部构建和运行的方式来实现链码的构建和运行，并且不再受限于特定的语言和部署环境。 ... [详细]

蜡笔小新 2023-12-13 21:47:39
json
处理docker容器时间和宿主机时间不一致问题的方法

本文介绍了处理docker容器时间和宿主机时间不一致问题的方法，包括复制主机的localtime到容器、处理报错情况以及重启容器的步骤。通过这些方法，可以解决docker容器时间和宿主机时间不一致的问题。 ... [详细]

蜡笔小新 2023-12-13 18:55:18
json
Web学习历程记录（七）——Tomcat基本概念和配置

本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念，以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器，包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实，适合初学者了解Tomcat的基础知识。 ... [详细]

蜡笔小新 2023-12-13 17:08:24
json
Tomcat/Jetty为何选择扩展线程池而不是使用JDK原生线程池？

本文探讨了Tomcat和Jetty选择扩展线程池而不是使用JDK原生线程池的原因。通过比较IO密集型任务和CPU密集型任务的特点，解释了为何Tomcat和Jetty需要扩展线程池来提高并发度和任务处理速度。同时，介绍了JDK原生线程池的工作流程。 ... [详细]

蜡笔小新 2023-12-13 16:18:09
html
Java的集合及其实现类详解

本文介绍了Java的集合及其实现类，包括数据结构、抽象类和具体实现类的关系，详细介绍了List接口及其实现类ArrayList的基本操作和特点。文章通过提供相关参考文档和链接，帮助读者更好地理解和使用Java的集合类。 ... [详细]

蜡笔小新 2023-12-13 14:12:18
html
电流源并联合并的方法及谐振电路的原理

本文介绍了电流源并联合并的方法，以及谐振电路的原理。谐振电路具有很强的选频能力，通过将电感和电容连接在一起，电流和电压会产生震荡。谐振频率的大小取决于电感和电容的大小，而电路中的电阻会逐渐降低震荡的幅度。电阻和电容组成的电路中，当电容放完电后，电阻两端的电压为0，电流不再流过电容。然而，电感是一种特殊的器件，当有电流流过时，线圈会产生感应磁场，阻止电流的流动，从而使电流不会减小。 ... [详细]

蜡笔小新 2023-12-13 12:49:32
overflow
org.apache.catalina.LifecycleEvent类的使用及代码示例

标题： ... [详细]

蜡笔小新 2023-12-13 11:03:10
json
单点登录原理及实现方案详解

本文详细介绍了单点登录的原理及实现方案，其中包括共享Session的方式，以及基于Redis的Session共享方案。同时，还分享了作者在应用环境中所遇到的问题和经验，希望对读者有所帮助。 ... [详细]

蜡笔小新 2023-12-12 19:23:28
json
Docker容器技术中限制容器对CPU的使用方法

本文介绍了在Docker容器技术中限制容器对CPU的使用的方法，包括使用-c参数设置容器的内存限额，以及通过设置工作线程数量来充分利用CPU资源。同时，还介绍了容器权重分配的情况，以及如何通过top命令查看容器在CPU资源紧张情况下的使用情况。 ... [详细]

蜡笔小新 2023-12-12 18:31:07
json
集合的遍历方式及其局限性

本文介绍了Java中集合的遍历方式，重点介绍了for-each语句的用法和优势。同时指出了for-each语句无法引用数组或集合的索引的局限性。通过示例代码展示了for-each语句的使用方法，并提供了改写为for语句版本的方法。 ... [详细]

蜡笔小新 2023-12-12 15:34:14
cookies
Python SQLAlchemy库的使用方法详解

本文详细介绍了Python中使用SQLAlchemy库的方法。首先对SQLAlchemy进行了简介，包括其定义、适用的数据库类型等。然后讨论了SQLAlchemy提供的两种主要使用模式，即SQL表达式语言和ORM。针对不同的需求，给出了选择哪种模式的建议。最后，介绍了连接数据库的方法，包括创建SQLAlchemy引擎和执行SQL语句的接口。 ... [详细]

蜡笔小新 2023-12-12 15:23:06
css
position属性absolute与relative的区别和用法详解

本文详细解读了CSS中的position属性absolute和relative的区别和用法。通过解释绝对定位和相对定位的含义，以及配合TOP、RIGHT、BOTTOM、LEFT进行定位的方式，说明了它们的特性和能够实现的效果。同时指出了在网页居中时使用Absolute可能会出错的原因，即以浏览器左上角为原始点进行定位，不会随着分辨率的变化而变化位置。最后总结了一些使用这两个属性的技巧。 ... [详细]

蜡笔小新 2023-12-12 13:16:49

346182773_20da31

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章