BootStrap学习(1)_html/css_WEB-ITnose
一、Bootstrap简介
BootStrap是由Twitter推出的前端框架，2011 年八月在 GitHub 上发布，BootStrap是基于Html,Css,Javascript的，可用于快速开发web，是现在注流的前端框架。
Bootstrap的优点有:
1. 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
2.浏览器支持：所有的主流浏览器都支持 Bootstrap。
3.容易上手：因为Bootstrap是基于 HTML 和 CSS 的基础知识，所以学习使用轻松。
4.响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
二、下载BootStrap
可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，将看到如下所示的网页：
您会看到两个按钮：
我们下载Download Bootstrap 这个就可以了。
然后这个的文件结构是
已经看到里面是一些CSS 和 JS 还有Glyphicons 的字体。
三、引入到HTML
1.把下载好的BootStrap文件放到项目中。
2.一个引用BootStrap的html模板:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="../js/bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="../js/jquery-1.9.1.min.js"></script> <script src="../js/bootstrap-3.3.5/dist/js/bootstrap.min.js"></script></head><body> </body></html>
在这里，可以看到
..包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。注意: 因为BootStrap 的javascript插件需要引入 jQuery ，所以要另外下载一个Jquery.js，并且要放到bootstrap.min.js的前面。
四、用BootStrap CDN加速点
可以不用下载BootStrap，直接使用一些BootStrap加速点，使用CND加速点的好处：是访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。
可根据个人喜欢的CDN加速点选用, 这里使用的是百度的静态资源库(http://cdn.code.baidu.com/)上的Bootstrap资源
HTML模板就可以变成了:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body> </body></html>
注意: 使用CDN必须有外网才可以。
五、第一个例子_字体图标
上面下载安装BootStrap的时候以经了解过它的目录结构，
在 dist文件夹内的fonts 文件夹内可以找到字体图标，它包含了下列这些文件：
相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。
Bootstrap 捆绑了 200 多种字体格式的字形 这里有BootStrap的字体图标列表http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm
CSS 规则解释
@font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');}.glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; -webkit-font-smoothing: antialiased; font-style: normal; font-weight: normal; line-height: 1; -moz-osx-font-smoothing: grayscale;}所以 font-face 规则实际上是在找到 glyphicons 地方声明 font-family 和位置。
.glyphicon class 声明一个从顶部偏移 1px 的相对位置，呈现为 inline-block，声明字体，规定 font-style 和 font-weight 为 normal，设置行高为 1。除此之外，使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性。
用法
如需使用图标，只需要简单地使用下面的代码即可。
<span class="glyphicon glyphicon-search"></span><br />在一个<span></span>标签中加入.class样式即可。<br />
<!DOCTYPE html><html><head> <title>Bootstrap 实例 - 如何使用字形图标（Glyphicons）</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head><body><p> <a href="#"><span class="glyphicon glyphicon-search">搜索</span></a> <a href="#" > <span class="glyphicon glyphicon-fast-backward">首页</span> </a> <a href="#"> <span class="glyphicon glyphicon-fast-forward">末页</span> </a> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-zoom-in">放大</span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-trash">删除</span> </button></p><button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-user"></span>用户</button><button type="button" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-user"></span>用户</button><button type="button" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-user"></span> 用户</button></body></html>
效果:
其中用户中的 btn-lg btn-sm btn-xs 是三个控制大小的样式。
自定义大小和颜色
通过增加或减少图标的字体尺寸，您可以让图标看起来更大或更小。
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px"> <span class="glyphicon glyphicon-user"></span> 用户</button>
定制字体颜色
<button type="button" class="btn btn-primary btn-lg" style="color: color:#f00;"> <span class="glyphicon glyphicon-user"></span> 用户</button>
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
HTML容易为初学者学习吗？
Apr 07, 2025 am 12:11 AM
HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
HTML，CSS和JavaScript的角色：核心职责
Apr 08, 2025 pm 07:05 PM
HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
HTML中起始标签的示例是什么？
Apr 06, 2025 am 12:04 AM
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
