bootstrap中怎样让label和input在同一行?

2025-03-22 17:13:28
推荐回答(2个)
回答(1):

基本代码:





Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。

Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。

Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。  

Bootstrap自带了13个jQuery插件,这些插件为Bootstrap中的组件赋予了“生命”。其中包括:模式对话框、标签页、滚动条、弹出框等。

回答(2):

全局样式
1
Bootstrap 中用到一些 HTML元素和CSS属性需要将页面设置为 HTML5 文档类型,即在页面顶部添加“”
2
布局容器:Bootstrap 需要为页面内容和栅格系统包裹一个 .container或container-fluid(占据全部视口viewport的容器)容器。
3
栅格系统,Bootstrap 提供了一套最多12列的流式栅格系统,通过 .row表示行 和 .col-xs-4 这种表示宽度的列快速创建栅格布局。

4
Bootstrap 排版、链接样式设置了基本的全局样式。
font-size 设置为 14px,line-height 设置为 1.428。

(段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

基础样式
【排版】,
1. 标题,可以用来.h1 到 .h6 类给内联属性的文本赋予标题样式,标题内通过 标签或带.small 类的元素标记副标题。
主体文本:.lead 类让段落突出显示。
2. 内联文本,使用 标签表示标注文本,删除,无用,插入,下划线,小号(父容器字体大小的 85%),着重,斜体。
3. 文本对齐类,text-left,text-center,text-right,text-justify,text-nowrap
4. 文本大小写类,text-lowercase,text-uppercase,text-capitalize
5. 缩略语类,为 元素设置 title属性并使用.initialism 类让 font-size 变得稍微小些。例:attr
6. 地址,以日常使用的格式呈现,在行结尾加
保留需要的样式即可。
7. 引用,将 HTML 元素包裹在

中即可表现为引用样式。对于直接引用,建议用

标签。
8. 列表,list-unstyled类移除默认 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。list-inline类通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。dl-horizontal类让

内的短语及其描述排在一行。
【代码】
标签包裹内联样式的代码片段,
标签标记用户通过键盘输入的内容,
 展示代码块 。可用pre-scrollable 类设置最高350px带垂直滚动条。
标签标记变量,
标签标记程序输出的内容。
【表格】
.table 类指定基本样式,
.table-striped 条纹样式,
.table-bordered 类为边框样式,
.table-hover 类带鼠标悬停样式,
.table-condensed 类紧凑样式。
状态类(行或单元格设置颜色):active,success,info,warning,info。

将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其
响应式表格: 会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。
【表单】
1. 基本实例,所有设置了 .form-control 类的