Bootstrap入门（一）

时间 2019-11-19

原文原文链接

引入bootsrap，Bootstrap中的JS插件依赖jQuery,所以jQuery要在Bootstrap以前引用

<!DOCTYPE html>css

<html lang="zh-CN"> <head> <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Bootstrap 101 Template</title>html

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

前端

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head> <body> <h1>你好，世界！</h1>html5

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

</body> </html> 在制做Web页面时，前端人员都习惯为网站设置一个全局样式（reset.css）。那么在Bootstrap框架中也不例外。Bootstrap框架的核心是轻量的CSS基础代码库，他并无一味的重置样式，而是注重各浏览器基础表现，下降开发难度。大部分前端人员都具备归零的思想，但实际你会发现，归零以后的样式在开发过程当中会存在着潜在的问题，例如，在全局样式表中将em变成一个普通标记，明明应该是斜体，怎么就没效果了呢？jquery

Bootstrap框架在这一部分作了必定的变动，再也不一味追求归零，而是更注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提高一些细节的体验，具体说明以下：bootstrap

1）移除body的margin声明
2）设置body的背景色为白色
3）为排版设置了基本的字体、字号和行高
4）设置全局连接颜色，且当连接处于悬浮“:hover”状态时才会显示下划线样式

三、form表单在<form>元素上使用类名“form-horizontal”主要有如下几个做用： 1）设置表单控件padding和margin值。 2）改变“form-group”的表现形式，相似于网格系统的“row”。浏览器

<form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> 记住密码 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">进入邮箱</button> </div> </div> </form> 四、在Bootstrap框架中，若是fieldset设置了disabled属性，整个域都将处于被禁用状态。听说对于整个禁用的域中，若是legend中有输入框的话，这个输入框是没法被禁用的。实验证实：但是为啥我在没被禁用下的输入框，再写一段同样的代码，它就被禁用了五、在制做表单时，难免要作表单验证。一样也须要提供验证状态样式，在Bootstrap框架中一样提供这几种效果。一、.has-warning:警告状态（黄色）二、.has-error：错误状态（红色）三、.has-success：成功状态（绿色）使用的时候只须要在form-group容器上对应添加状态类名。框架

<form role="form"> <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">警告状态</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError1">错误状态</label> <input type="text" class="form-control" id="inputError1" placeholder="错误状态"> </div> </form> 运行效果以下或查看右侧结果窗口：字体

从效果能够看出，三种状态下效果都是同样的，只是颜色不同而以。网站

其余两种状态省略源码不在此展现。不少时候，在表单验证的时候，不一样的状态会提供不一样的 icon，好比成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。若是你想让表单在对应的状态下显示 icon 出来，只须要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一块儿：

<form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > <span class="glyphiconglyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> ...... </div> <div class="form-group has-error has-feedback"> ...... </div> </form> 运行效果以下或查看右侧结果窗口：

从效果图中能够看出，图标都居右。在 Bootstrap 的小图标都是使用@font-face来制做（后面的内容中将会着重用一节内容来介绍）。并且必须在表单中添加了一个 span 元素：

1. BootStrap入门教程 (一)
2. Bootstrap入门（第一天）
3. Bootstrap入门！
4. Bootstrap入门
5. 入门bootstrap
6. bootstrap入门1
7. 01.Bootstrap入门
8. Bootstrap基础入门
9. bootstrap框架入门
10. BootStrap基础入门
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用