Bootstrap 静态控件

当您需要在一个水平表单内表单标签后放置纯文本时,请在 <p> 上使用 class .form-control-static

实例:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap历练实例:静态控件</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="control-label col-sm-2">Email:</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>

<div class="form-group">
<label for="password" class="control-label col-sm-2">密码:</label>
<div class="col-sm-10">
<input type="password" id="password" class="form-control" placeholder="Input you password" />
</div>
</div>
</form>
</div>

<script src="Css/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

时间: 2024-09-29 09:39:44

Bootstrap 静态控件的相关文章

bootstrap注意事项(五)表单

1.基本实例 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control类的 <input>.<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;. 将 label 元素和前面提到的控件包裹在 .form-group中可以获得最好的排列. <!DOCTYPE HTML><html><head> <link rel="stylesheet" hr

bootstrap全局css样式

以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ .hidden-xs { display: none!important; } } @media (max-width: 991px) and (min-width: 768px){ .hidden-sm { display: none!important; } } @media (min-widt

bootstrap学习笔记--bootstrap组件

前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 Bootstrap--表格 Bootstrap--表单 Bootstrap--按钮 Bootstrap--图片 Bootstrap--辅助类 Bootstrap--响应式实用工具 Bootstrap--字体图标 Bootstrap--下拉菜单 Bootstrap--按钮组 Bootstrap--按钮下

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 样式

http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. 复制 <!DOCTYPE html> <html lang="zh-CN"> ...

Bootstrap基本使用[转]

Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码).Bootstrap提供了全面的基本及组件样式并自带了13个jQuery插件(模态对话框.标签页.滚动条.弹出框等),可满足常用开发 需要,而且还根据需要定制.另外,Bootstrap提供了优雅的HTML和CSS规范,使用者也可以参考学习.本文作者(jawidx)仅在结构层面对 Bootstrap进行介绍. 全局样式 1 Bootstrap 中用到一些 HTML元素和

BootStrap之基础-2 CSS样式(全局CSS样式)

一.全局CSS样式 概述 - HTML5文件类型 - BootStrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5  - 移动设备优先 - 为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据元素 CSS全局样式 - 为body元素设置 background-color: #fff; - 使用 @font-family-base.@font-size-base 和 @line-height-base a变量作为排版的基本参数 - 为所有链接设置了基

BootStrap学习之表单

本文和大家分享的主要是BootStrap的表单相关内容,一起来看看吧,希望对大家学习BootStrap有所帮助. 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control 类的 <input> . <textarea> 和 <select>元素都将被默认设置宽度属性为 width: 100% ;. 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列. 基本实例: <div class='container

我的BootStrap学习笔记

1.全局样式里面: 1.container:版心 2.col-xx-xx:栅格布局 3.btn btn-default: 按钮,默认按钮样式 4..pull-left  pull-right  clearfix: 左浮动 右浮动 清除浮动 5.响应式工具:visiable-xx:  在xx下隐藏 6.text-center;text-left;text-right:居中/靠左/靠右 2.CSS组件里面: 1.Glyphicons 字体图标(自定义字体图标) 2.nav-tabs:导航 3.nav