form-layout-finish.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单排版</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../bootstrap/js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1 class="page-header">表单排版</h1>
<form class="form-horizontal">
<fieldset>
<legend>用户登录</legend>
<div class="control-group">
<label class="control-label" for="username">用户名</label>
<div class="controls">
<input id="username" type="text">
<p class="help-block">请输入您登录时使用的用户名</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">密码</label>
<div class="controls">
<input id="password" type="password" >
<p class="help-block">请输入设置的密码</p>
</div>
</div>
</fieldset>
<div class="form-actions">
<button type="submit" class="btn btn-primary">登录</button>
</div>
</form>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
分享到:
相关推荐
Bootstrap3.0的表单排版能力强大且灵活,结合其栅格系统和响应式特性,能够轻松创建出适应各种设备的表单。通过合理使用`.form-group`、`.control-label`、`.col-md-*`等类,可以实现文字与输入框的前后排列和上下...
它包括栅格系统、排版、按钮、表单、导航、组件和JavaScript插件等。这些工具可以帮助开发者快速构建美观且响应式的页面。 2. **表单组件**:Bootstrap的表单组件提供了一套预定义的样式,包括输入框、选择器、单选...
在排版基础中,你还会接触到Bootstrap的其他关键组件,如表格、表单、按钮和警告提示等。这些组件都有预设的样式和行为,可以直接使用,大大简化了开发过程。例如,Bootstrap的表格类可以让普通HTML表格变得美观,...
4. **组件**:Bootstrap提供了多种预设的组件,如导航栏(navbar)、按钮(buttons)、表单(forms)、卡片(cards)等。课程可能会演示如何使用这些组件构建常见的网页元素。 5. **JavaScript插件**:Bootstrap还...
Bootstrap是世界上最受...在实际项目中,通常会结合其他Bootstrap组件,如导航条、卡片、表单等,共同构建出功能丰富、美观的网页界面。在学习过程中,阅读官方文档、查看示例代码和实践动手操作都是非常重要的步骤。
1. **CSS**:Bootstrap的核心CSS文件(如`bootstrap.css`或`bootstrap.min.css`)包含了预定义的样式规则,用于布局、排版、响应式设计、表单、按钮、导航等元素。开发者可以根据需求引入这个文件,使网页具有...
你可以从中学习到如何初始化一个Bootstrap项目,理解其网格系统、排版样式、导航条、按钮、表单、图像、模态框、下拉菜单等基本元素的创建和应用。此外,PPT还可能包含响应式设计的概念,讲解如何使页面在不同设备上...
框架的核心包括网格系统、排版、表单、按钮、图像、导航等元素。 2. **响应式设计**:Bootstrap的响应式设计意味着页面布局会根据设备屏幕尺寸自动调整,确保在手机、平板和桌面电脑上都有良好的用户体验。这对于...
它旨在减少开发工作中的样板代码,提供一系列预定义的类,用于布局、排版、按钮、导航、表单以及其他各种组件。 Bootstrap官方文档强调了页面需要设置为HTML5文档类型,这包括在每个页面的顶部声明<!DOCTYPE html>...
10. **排版**:Bootstrap提供了诸如`.h1`到`.h6`的标题类,`.lead`段落类,以及`.text-center`,`.text-right`和`.text-left`等文本对齐类,帮助调整排版。 在使用Bootstrap3中文离线手册时,开发者可以查阅`.chm`...
在Bootstrap3.3.5中,核心组件包括网格系统、表单、按钮、导航、下拉菜单、模态框、图像、媒体对象以及JavaScript插件。这些组件都有预定义的样式,可以快速实现常见设计模式,极大地提高了开发效率。例如,网格系统...
这个文件包括栅格系统、排版、按钮、表单、图像、媒体对象等预定义的样式。同样,"min"意味着这是经过优化的版本,减少了文件体积,有助于提升页面加载性能。你需要在HTML文档的`<head>`部分引入这个CSS文件,以应用...
3. **排版工具**:Bootstrap提供了一系列排版工具,如`<h1>`至`<h6>`的标题、段落(`.lead`)、文本对齐(`.text-left`、`.text-center`、`.text-right`)和强调文本(`.text-muted`、`.text-primary`等)。...
- 排版:包括字体、头部、段落、引用、代码等基本排版元素的样式。 - 表单:预设的表单控件样式,以及对表单布局的控制。 - 按钮:提供多种尺寸、颜色和状态的按钮,以及按钮组和按钮下拉菜单。 - 图像:包括...
Bootstrap的CSS文件提供了一系列的预定义样式,如排版、网格系统、表单、按钮、导航等,而JavaScript文件则包含了许多交互组件,如模态框、下拉菜单、轮播图等。开发者可以根据需要选择引入相应的文件,以实现所需的...
在表单排版方面,Bootstrap 提供了多种样式,可以创建基本表单、水平排列表单、内联表单等。Bootstrap 还提供了 label、帮助块、checkbox 和按钮水平排列等效果。 Bootstrap 是一个功能强大、灵活的前端框架,可以...
Bootstrap的核心特点包括网格系统、排版、导航、表单、按钮、图像以及自定义可扩展的JavaScript组件,如模态框、下拉菜单和轮播图等。 EasyUI则是一个基于jQuery的轻量级UI框架,它为开发者提供了大量的预定义组件...
Bootstrap 3.3.5是该框架的一个稳定版本,它提供了一系列预先设计的、易于使用的组件,如网格系统、排版、表单、按钮、导航、下拉菜单、模态框、图像和自定义排版等。这些组件使得开发者能够快速构建具有专业外观的...
2. **预定义样式**:Bootstrap提供了一系列预定义的CSS类,如排版、表格、表单、按钮、图片等,大大简化了网页设计。 3. **组件丰富**:Bootstrap包含多种可重用的组件,如导航条、下拉菜单、模态框、轮播图、提示...
4. **排版**:Bootstrap 4对排版进行了优化,提供了字体、头部、段落、引用、列表等样式,让文本内容更具可读性。 5. **颜色和间距**:Bootstrap 4有一套完整的色彩方案,包括主色、次色以及警示色等。此外,还定义...