bootstrap css排版

smart-form

单行元素: 一般用div包含,class="row"

列元素:用section包含,class="col col-x"(section带有margin-bottom,若想去除,可以使用div)

按钮和元素一般用label,class="类型",里面包含元素标签和span,span内为显示内容。

smart-form中用row和col,别的地方不用,row作用只是margin:-14px 0

bootstrap form element:

form的class="form-horizontal",垂直排布的表单

表单的每个区域用section分割,不带class

section区域标题用<legend>标签。

一行元素用<div class="form-group">

显示标签用:<label class="control-label col-md-2">Small Input</label>

便签中输入框用

<div class="col-md-10">
<input class="form-control input-xs" placeholder=".input-xs" type="text">
</div>

示例:

                          <fieldset>
                                                <legend>Input sizes</legend>

                                                <div class="form-group">
                                                    <label class="control-label col-md-2">Extra Small Input</label>
                                                    <div class="col-md-10">
                                                        <input class="form-control input-xs" placeholder=".input-xs" type="text">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-2">Small Input</label>
                                                    <div class="col-md-10">
                                                        <input class="form-control input-sm" placeholder=".input-sm" type="text">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-2">Default Input</label>
                                                    <div class="col-md-10">
                                                        <input class="form-control" placeholder="Default input" type="text">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-2">Large Input</label>
                                                    <div class="col-md-10">
                                                        <input class="form-control input-lg" placeholder=".input-lg" type="text">
                                                    </div>
                                                </div>

                                            </fieldset>

大致结构:

-xs极小,-sm小,normal普通,-lg大

.col-**-offset-设置偏移多少。

时间: 2024-11-12 23:10:15

bootstrap css排版的相关文章

Bootstrap Css

Bootstrap 1.Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的.您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本. 2.实例采用的是百度的静态资源库(http://cdn.code.baidu.com/)上的Bootstrap资源.百度的静态资源库的 CDN 服务,访问速度更快.加速效果更明显.没有速度和带宽限制.永久免费,引入代码如下: h

(二)Bootstrap CSS 概览

在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html> 如果在 Bootstrap 创

Bootstrap CSS(一)

1.Bootstrap CSS 概览 1.1HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> xxx </html> 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),您可能会面临一些浏览

Bootstrap CSS 概览

HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html> 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),您可能会面临一些浏览器显示不一致的问题,甚至可能面临一些特定情

Bootstrap学习:Bootstrap CSS 概览

这一章是Bootstrap 底层结构的关键部分,这个可以我们让 web 开发变得更好.更快.更强壮的最佳实践. 接下来,开始我们的bootstrap学习了. HTML 5 文档类型(Doctype) 由于Bootstrap 使用了一些 HTML5 元素和 CSS 属性.所以为了让这些正常工作,需要使用 HTML5 文档类型(Doctype). 因此,在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html&

分针网: Bootstrap CSS 概览

在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),您可能会面临一些浏览器显示不一致的问

Bootstrap CSS概览代码文字标注篇

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap 练习</title> <!--Bootstrap3的设计目标是移动设备优先,然后才是桌面设备.为了让Bootstrap开发的网站对移动设备友好,确保适当的绘制

Bootstrap CSS 描述

<!DOCTYPE html><html lang="zh-CN"><head> <!--定于内容,和内容的编码格式--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--为了确保适当的绘制与放缩,需要在<head>中添加viewport元数据标签--> <me

2.Bootstrap CSS

Bootstrap CSS 一.Bootstrap CSS概览 移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备. 现在不一样了,Bootstrap 3 默认的 CSS 本身就对移动设备友好支持. Bootstrap 3 的设计目标是移动设备优先,然后才是桌面设备.这实际上是一个非常及时的转变,因为现在越来越多的用户使用移动设备. 为了让 Bootstrap