bootstrap前端模板教程[编辑]

---

一、Bootstrap 前端模板教程基础

1、HTML教程：HTML 是用来描述网页的一种语言，指的是超文本标记语言: HyperText Markup Language
，不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag)，使用标记标签来描述网页。HTML 文档包含了HTML 标签及文本内容，也叫做 web 页面。
2、CSS教程：CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，样式通常存储在样式表中，把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。
3、JavaScrip教程：JavaScript 是一种轻量级的编程语言，是可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。

二、Bootstrap 前端模板输入框组

输入框组扩展自 表单控件。使用输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。form-control 添加前缀或后缀元素的步骤如下：首先把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。再把该 <span> 放置在 <input> 元素的前面或者后面。

三、Bootstrap 前端模板超大屏幕

该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如为：1、创建一个带有 class .jumbotron. 的容器 <div>。2、除了更大的 <h1>，字体粗细 font-weight 被减为 200px。
<div class="container">
<div class="jumbotron">
<h1>欢迎登陆页面！</h1>
<p>这是一个超大屏幕（Jumbotron）的实例。
</p> <p><a class="btn btn-primary btn-lg" role="button">
学习更多</a>
</p>
</div>
</div>

四、Bootstrap 前端模板按钮组

通过 Bootstrap 按钮（Button） 插件 添加可选的 JavaScript 单选框和复选框样式行为。
<div class="btn-group">
<button type="button" class="btn btn-default">按钮
</button> <button type="button" class="btn btn-default">按钮
</button> <button type="button" class="btn btn-default">按钮
</button>
</div>

五、Bootstrap 前端模板进度条

Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。添加一个带有 class .progress 的 <div>。

秀友百科词条内容均由网友提供，仅供参考。如发现词条内容有问题，请联系管理员。