前端技术（Bootstrap）
⽬录
1、什么是Bootstrap?jquery下载文件插件
Bootstrap 是⼀个⽤于快速开发 Web 应⽤程序和⽹站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年⼋⽉在 GitHub 上发布的开源产品。 2、为什么使⽤Bootstrap?
移动设备优先：⾃ Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器⽀持：所有的主流浏览器都⽀持 Bootstrap。
容易上⼿：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够⾃适应于台式机、平板电脑和⼿机。它为开发⼈员创建接⼝提供了⼀个简洁统⼀的解决⽅案。
它包含了功能强⼤的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。
3、Bootstrap包的内容
基本结构：Bootstrap 提供了⼀个带有⽹格系统、链接样式、背景的基本结构。
CSS：Bootstrap ⾃带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及⼀个先进的⽹格系统。
组件：Bootstrap 包含了⼗⼏个可重⽤的组件，⽤于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件：Bootstrap 包含了⼗⼏个⾃定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您⾃⼰的版本。
4、Bootstrap的下载和安装
您会看到两个按钮：
Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含⽂档和最初的源代码⽂件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
如果您使⽤的是未编译的源代码，您需要编译 LESS ⽂件来⽣成可重⽤的 CSS ⽂件。对于编译 LESS
⽂件，Bootstrap 官⽅只⽀持 ，这是 Twitter 的基于 的 CSS 提⽰。
我使⽤的是 Bootstrap 的预编译版本（Bootstrap 3）。
由于⽂件是被编译过和压缩过的，在独⽴的功能开发中，不必每次都包含这些独⽴的⽂件。
4.1 ⽂件结构
4.1.1 预编译的 Bootstrap
当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP ⽂件，您将看到下⾯的⽂件/⽬录结构：
如上图所⽰，可以看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的 CSS 和 JS（bootstrap.min.*）。同时也包含了Glyphicons 的字体，这是⼀个可选的 Bootstrap 主题。
4.1.2 Bootstrap 源代码
如果您下载了 Bootstrap 源代码，那么⽂件结构将如下所⽰：
less/、js/ 和 fonts/ 下的⽂件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ ⽂件夹包含了上⾯预编译下载部分中所列的⽂件和⽂件夹。
docs-assets/、examples/ 和所有的 *.html ⽂件是 Bootstrap ⽂档。
在⼯程中我们导⼊这些⽂件：
<title>bootstrap⼊门与使⽤</title>
<!--boostrap的使⽤：
1、必须先引⼊bootstrap的⽀持，包括js、css、font⽂件
2、引⼊的⽂件必须先有jQuery的核⼼⽂件，再引⼊bootstrap的js⽂件，再引⼊⾃⼰的⽂件
3、css⽂件必须先引⼊bootstrap的css⽂件再引⼊⾃⼰的⽂件
4、font⽂件⽆需在页⾯上引⼊，但是需要在项⽬的⽬录中存在
-->
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<!--导⼊⾃⼰的js⽂件-->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<!--导⼊⾃⼰的css⽂件-->
</head>
<body>
<h1>bootstrap使⽤</h1>
</body>
</html>
5、Bootstrap CSS常⽤
5.1 按钮
<title>Bootstrap 按钮</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<!--任何带有 class .btn 的元素都会继承圆⾓灰⾊按钮的默认外观。
但是 Bootstrap 提供了⼀些选项来定义按钮的样式，具体如下表所⽰：
以下样式可⽤于<a>, <button>, 或 <input> 元素上：
-->
<h1>不同样式的按钮</h1>
<button type="button" class="btn btn-default">标准按钮</button>
<button type="button" class="btn btn-primary">原始按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>it培训班有用吗
sql while循环语句用法<button type="button" class="btn btn-info">信息按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>
<button type="button" class="btn btn-link">链接按钮</button>
<h1>⼤⼩不同的按钮</h1>中文网站模板大全>oracle数据库应用结构
<button type="button" class="btn btn-info btn-xs">xs按钮</button>
<button type="button" class="btn btn-success btn-sm">sm按钮</button>
<button type="button" class="btn btn-danger btn-lg">lg按钮</button>
<button type="button" class="btn btn-warning btn-block">block按钮</button>
<h1>不同状态的按钮</h1>
<button type="button" class="btn btn-default">标准按钮</button>
<button type="button" class="btn btn-default active">标准激活按钮按钮</button>  <button type="button" class="btn btn-primary">原始按钮</button>
<button type="button" class="btn btn-primary active">原始激活按钮</button>
<button type="button" class="btn btn-default">标准按钮</button>
<button type="button" class="btn btn-default disabled">标准禁⽤按钮按钮</button>  <button type="button" class="btn btn-primary">原始按钮</button>
<button type="button" class="btn btn-primary disabled">原始禁⽤按钮</button>
<input type="button" class="btn btn-info" value="input按钮"/>
<a href="01-bootstrap-⼊门与使⽤.html" class="btn btn-info" >a链接</a>
</body>jquerydelegate如何解绑手机号
</html>
效果：
5.2 表格
表格类：
<tr>, <th> 和 <td> 类：
响应式表格：
通过把任意的 .table 包在 .table-responsive class 内，您可以让表格⽔平滚动以适应⼩型设备（⼩于 768px）。当在⼤于 768px 宽的⼤型设备上查看时，您将看不到任何的差别。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。