BootStrop前端框架入门教程详解

自举，来自推特，是目前最受欢迎的前端框架自举是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得网开发更加快捷。

引导程序的学习非常简单，并且它所提供的样式又非常精美。只要稍微简单的学习就可以制作出漂亮的页面。

引导程序中文网：http://v3.bootcss.com/

引导程序提供了三种类型的下载：

-

用于生产环境的引导程序

编译并压缩后的CSS、JavaScript和字体文件。不包含文档和源码文件。

引导程序源码

Less、JavaScript和字体文件的源码，并且带有文档。需要较少的编译器和一些设置工作。

厚颜无耻

这是引导程序从较少的到厚颜无耻的源码移植项目，用于快速地在铁轨、指南针或只针对厚颜无耻的项目中引入。

-

其实我们不用下载引导程序也可以使用它：

引导程序中文网为引导程序专门构建了自己的免费加拿大加速服务。基于国内云厂商的加拿大服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。

base.html

！DOCTYPE html 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 '！-上述3个自指的标签*必须*放在最前面，任何其他内容都*必须*跟随其后！-标题引导101模板/标题！- Bootstrap - link rel='样式表href=' http://cdn。bootscs。com/Bootstrap/3。3 .4/CSS/Bootstrap。量滴CSS '/头体h1你好，自举！/h1！-jQuery(引导的Java Script语言插件所必需的)-脚本src=' http :http://cdn。bootscss。com/jQuery/1。11 .2/jQuery。量滴js '/脚本！-包含所有已编译的插件（如下图),或根据需要包含单个文件-脚本src=' http :http://cdn。bootscs。com/bootstrap/3。3 .4/js/自举。量滴js '/脚本/正文/html库。超文本标记语言中已经引入了自举，将其保存，我们就可以使用引导程序提供的样式了。

字体图标

引导程序默认提供了二百多个图标。我们可以通过跨度标签来使用这些图标：

h3图标/H3 span=' glyphicon glyphicon-home '/span span=' glyphicon-signal '/span span=' glyphicon-cog '/span span=' glyphicon-apple '/span span class=' glyphicon glyphicon-trash '/span span class=' glyphicon-play-circle '/span span=' glyphicon glyphicon-耳机/span

按钮

按钮/按钮标签用于创建按钮自举提供了丰富的按钮样式。

h3按钮/h3按钮类型='button' class='btn btn-default '按钮/button button type=' button ' class=' BTN BTN-主' primary/button type=' button ' class=' BTN BTN-成功'成功/button type=' button ' class=' BTN BTN-信息' info/button type=' button ' class=' BTN BTN-警告'警告/button type=' button ' class=' BTN BTN-危险'危险/button H3按钮尺寸/h3按钮类型='button' class='btn btn-default '按钮/button button type=' button ' class=' BTN BTN-初选BTN-LG primary/button type=' button ' class=' BTN BTN-成功BTN-sm ' success/button type=' button ' class=' BTN BTN-信息BTN-xs ' info/button H3把图标显示在按钮里/H3按钮类型=' button ' class=' BTN BTN-default ' span=' glyphicon-home '/span按钮/按钮按钮除了有默认的大小外自举还提供三个参数来调整按钮的大小，分别是：btn-lg、btn-sm和btn-xs。

下拉菜单

下拉菜单是最常见的交互之一自举提供了漂亮的样式。

h3下拉菜单/H3 div class='下拉'按钮class=' BTN BTN-主下拉-切换' type=' button ' id='下拉菜单1 '数据-切换='下拉' aria-expanded=' true '下拉span class='插入符号'/span/button ul class='下拉菜单'角色='演示' a角色=' menuitem ' tabindex='-1 ' href=' # ' Action/a/Li角色='演示' a '

输入框

通过输入/输入标签去创建输入框。

h3输入框/H3 div class=' input-group ' span class=' glyphicon glyphicon-user '/span输入类型=' text '占位符=' username '/div div class=' input-group ' span class=' glyphicon glyphicon-lock '/span输入类型=' password '占位符=' password '/div

导航栏

导航栏作为整个网站的指引必不可少。

h3导航栏/H3导航条导航条-反向导航条-固定顶部div id='导航条' class='导航条-折叠折叠折叠ul class=' nav bar-nav ' Li class=' active ' a href=' # ' Home/a/Li lia href=' # about ' about/a/Li lia href=' # contact ' contact/a/Li class=' drop ' a href=' # ' class=' drop-toggle ' data-toggle=' drop ' role=' button ' aria-expanded='-/。导航-折叠/分区/导航

表单

人与系统之间数据的传递都需要依靠表单来完成。比如注册/登录信息的提交，查询条件的提交等。用形式/形式标签来创建表单。

h3表单/H3表单div '表单-组' span='字体-用户'/span输入类型=' email ' id='示例输入temail 1 '占位符='输入电子邮件'/div class=' form-group ' span class=' glyphicon glyphicon-lock '/span输入类型='密码' id='示例输入密码1 '占位符='密码'/div class='表单组'标签为='范例输入档案'文件输入/标签输入类型='文件' id='/p/div class='复选框'标签输入类型='复选框'签出我/标签/div按钮类型='提交' BTNBTN-默认提交/按钮/表单

警告框

警告框是系统向用户传达信息和提供指引的重要手段。没有针对警告框的标签，通过引导程序所提供的样式可以瞬间制作出漂亮的警告框。

h3警告框/H3 div='警报警报-警告警报-禁用'角色='警报'按钮类型='button' class='close '数据-disable=' alert ' aria-label=' Close ' span aria-hidden=' true '/span/button强警告！/strong最好检查一下自己，你看起来不太好/div class='警报警报-成功'角色=' alert ' a href=' # ' class=' alert-link '成功！/a/div div class=' alert alert-info '角色=' alert ' a href=' # ' class=' alert-link '信息！/a/div class=' alert alert-warning '角色=' alert ' a href=' # ' class=' alert-link '警告！/a/div class=' alert alert-danger '角色=' alert ' a href=' # ' class=' alert-link '危险！/a/div

进度条

系统的处理过程往往需要用户等待，进度条可以让用户感知到系统的处理过程，从而增加容忍度。

h3进度条/H3 div class=' progress ' div class=' progress-bar '角色=' progress bar ' aria-value now=' 70 ' aria-value min=' 0 ' aria-value max=' 100 ' style=' width : 60%；'70%/分区/分区

以上所述是小编给大家介绍的BootStrop前端框架入门教程详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！