用Bootstrap栅格系统表单

最新推荐文章于 2023-02-07 00:04:12 发布
最新推荐文章于 2023-02-07 00:04:12 发布
阅读量2.2k 收藏 6
点赞数 1
分类专栏： 前端 文章标签： bootstrap 栅格系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30638831/article/details/76778309
版权 



<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例 - 页面标题</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="padding: 50px;background-color: #ccc;">

    <div class="container" style="padding:50px;background-color:#fff;">

    <form class="form-horizontal"><!-- 表单中的栅格系统不用row  而是用form-horizontal：水平排列的表单 加到form元素中   -->
        <div class="form-group">  <!-- form-group代表分组的意思  把label与input分成一组  -->
            <label class="col-md-2 control-label" for="username">用户名:</label>  <!--control-label控制label与input之间的距离  for的作用是将username与input中的username绑定在一起，你正在点击用户名的时候，input输入框获得焦点   -->
            <div class="col-md-4"><!-- 加div进行设置input的栅格  -->
                <input type="text"  id="username" class="form-control" placeholder="请输入用户名" maxlength="30">  <!-- form-control  控制input输入框的显示  -->
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label" for="password">密码:</label>
            <div class="col-md-4">
            <input type="password" id="password" class="form-control" placeholder="请输入密码">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">上次图片:</label>
            <div class="col-md-10">
            <input type="file">
            </div>
                <p class="help-block">上传图片类型：xxxxx</p> <!-- help-block 帮助信息以块的方式显示 与file之间的距离发生变化 -->
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">兴趣爱好:</label>
            <div class="col-md-10">  <!-- class="checkbox"把一组的复选框放在一起  -->
                <label class="checkbox-inline"><input type="checkbox" value="画画">画画</label><!--checkbox-inline分组显示   -->
                <label class="checkbox-inline"><input type="checkbox" value="玩游戏">玩游戏</label>
                <label class="checkbox-inline"><input type="checkbox" value="听歌">听歌</label>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">学历：</label>
            <div class="col-md-10">  <!-- class="radio" checkbox把一组的复选框放在一起  -->
                <label class="radio-inline"><input type="radio" value="画画">本科</label><!--checkbox-inline分组显示   -->
                <label class="radio-inline"><input type="radio" value="玩游戏">研究生</label>
                <label class="radio-inline"><input type="radio" value="听歌">博士</label>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label" for="resume">个人简历:</label>
            <div class="col-md-4">
                <textarea rows="5" class="form-control" id="resume" placeholder="请输入您的信息"></textarea>
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-2 col-md-offset-2 ">
                <button class=" btn btn-success btn-block">提交表单</button>
             </div>
            <div class="col-md-2  col-md-offset-1 ">
                <button class=" btn btn-success btn-block"  >取消</button>
            </div>
        </div>
        <!--<div class="col-md-offset-2 col-md-2">-->
            <!--<button class=" btn btn-success ">提交表单</button>-->
        <!--</div>-->

    </form>

    </div>
</body>
</html>




醉小义
关注
专栏目录
Bootstrap中的基础CSS： 栅格系统 表格 表单 按钮
锦鲤姑娘的博客
03-08 861
一、bootstrap下载与安装 二、基础CSS 1、栅格系统 2、表格 3、表单 4、按钮
03-bootstrap-响应式布局-栅格系统
最新发布
记录java学习日常~
05-25 2881
行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。
【BootStrap】栅格系统、表单样式与按钮样式-附有源码
谙忆-陈浩翔
05-13 5818
转载请注明出处：http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 栅格系统1、栅格系统介绍Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。Bootstrap的栅格系统，由一个行(.row)和多个列构成。栅格系统用于通过一系列的行（row）与列（column）的组
Bootstrap的全局css样式之栅格系统、表单和图片部分常用类.
yanziit的博客
03-07 1678
我感觉挺有用,摘抄一点,自己做笔记
bootstrap栅格系统，代码嵌入，表格
LimonSea的博客
10-27 1581
一、栅格系统 栅格系统要注意，bootstrap最多包括12列，超出就会换行。还可以进行嵌套，代码中设置了透明度，是可叠加的，还是很好看的~以后要常用。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;栅格系统&lt;/title&gt;
html 栅格表单,bootstrap-栅格布局系统-表单-组件
weixin_29119475的博客
06-26 922
一. bootstrap-全局css样式-栅格布局系统-重点难点1. 所有的行必须放在容器中.container或container-fluidcontainerscreen>1200px(超大PC显示器-lg) 容器宽1170pxscreen>992px(普通PC显示器-md) 容器宽970pxscreen>768px(平板显示器-sm) 容器宽750pxscre...
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
09-02
Bootstrap栅格系统是一种基于12列的响应式布局框架，旨在帮助开发者构建适应不同设备屏幕大小的网页。这种系统能够确保网页在PC、平板、手机等不同设备上呈现出优雅的自适应效果，优化用户体验。Bootstrap栅格系统的...
关于bootstrap栅格系统
m0_67387108的博客
05-02 456
目录 栅格系统 栅格参数 bootstrap排版 bootstrap下载地址 ： v3.bootcss.com 栅格系统 bootstrap提供了一套响应式，移动设备优先的流式栅格系统，会随着屏幕或者视口尺寸的增加 最多自动分为12列 栅格参数 类前缀： .col-xs-4 (.col固定样式 xs表示大小 数字代表所占的列数) .col-xs-offset-4（.col固定样式 xs表示大小 offset向右移动 4表示向右移动4列）...
Bootstrap栅格系统理解
qq_40890601的博客
05-30 527
Bootstrap布局容器 必须使用HTML5的文档类型； <!DOCTYPE html> <html> ... </html> 移动设备优先； 布局容器； container 和 container-fluid 不能嵌套。 栅格系统 行 row必须包含在布局容器（container 或 container-fluid）里，列包含在row里。 ...
Bootstrap栅格系统与常用组件
小王的博客
08-03 1422
BootStrap栅格系统与常用组件
bootstarp表单验证
05-10
集成bootstarp前端样式和Jquery的常见表单元素验证示例代码
Bootstrap（一）容器、栅格（核心）、按钮、表单
COOL66BOY的博客
03-15 1440
文章目录bootstrap框架介绍使用、容器bootstrap框架介绍使用bootstrap容器bootstrap栅格系统（核心）bootstrap按钮bootstrap表单 bootstrap框架介绍使用、容器 bootstrap框架介绍使用 bootstrap是一个简单、直观、强悍的前端框架，让web开发更迅速、简单。来自twitter，目前很受欢迎的前端框架之一。Boostrap是基于HTNL、CSS、JavaScript的、让书写代码更容易。移动优先，响应式布局开发。 bootstrap中文网址：
前端 栅格布局 表单验证 实现及表单数据存储
qq_40982347的博客
10-23 458
导入CSS <!-- load CSS --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <!--前端框架 bootstrap--> <link rel="stylesheet" type="text/css" href="css/all.min.css"&...
Bootstrap复习二——栅格系统（form表单示例）
小头Sophia
01-18 7871
1.关于低版本的IE浏览器兼容性问题的解决： //注意：这部分不是注释 上面的代码注释后显示是这样的： --> --> --> --> 注意红色部分的内容 2.栅格系统： 1）Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 2）行（row）”必须包
网页的栅格系统设计-转
weixin_33979203的博客
10-28 164
今天无意间在好友的qqzone上看到的，很好的文章，也能给自己很好的指导，学习并收藏一下，希望能为我们这些想做好设计的程序员们起到好的作用吧。 栅格系统的形成1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任...
Bootstrap系列之表单（Forms）
老__L的博客
06-13 5744
表单控件样式、布局选项和用于创建各种表单的自定义组件的示例和使用指南。Bootstrap 表单控件通过类来扩展我们的表单样式。使用这些类可以选择使用它们的定制显示，以便在浏览器和设备之间实现更一致的呈现。确保在所有输入中使用适当的type属性(例如，用于电子邮件地址，用于数字信息)，以利用较新的输入控件，如电子邮件验证、数字选择等。这里有一个演示Bootstrap表单样式的快速示例。 文本表单控件，如、和都使用类进行样式化。包括一般外观、焦点状态、大小等样式。一定要探索我们的自定义表单以进一步样式化。 对
Bootstrap(二) 表单(form)
wangchaohpu的博客
08-28 1150
表单(form)、表单样式、textarea、select、复选框(checkbox)、单选框(radio)、内联表单(form-inline)、水平表单(form-horizontal)、 输入框(input-group) 1、一般的form表单   2、bootstrap表单样式、textarea、select    3、复选框、单选框 3.1复选框   3.2单选框 ...
BootStarp的form表单的基本写法
weixin_30835649的博客
01-17 153
代码如下： <!DOCTYPE html> <html> <head> <title>BootStrap的基础入门</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=...
Bootstrap表单及表单布局
记录和分享属于我的“IT”时光
02-07 805
Bootstrap4 支持二种表单布局方式：堆叠表单（垂直方向），内联表单（水平方向）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值