首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

BootStrop前端框架入门教程详解

Posted in Javascript onDecember 25, 2016

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

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

bootstrap中文网：http://v3.bootcss.com/ 

bootstrap提供了三种类型的下载：

-------------------------------------------------------------

用于生产环境的 Bootstrap

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

Bootstrap 源码

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

Sass

这是 Bootstrap 从 Less 到 Sass 的源码移植项目，用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。

------------------------------------------------------------

其实我们不用下载bootstrap也可以使用它：

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

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个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
 <title>Bootstrap 101 Template</title>
 <!-- Bootstrap -->
 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
 </head>
 <body>
 <h1>你好，bootstrap！</h1>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </body>
</html>

 base.html中已经引入了bootstrap，将其保存，我们就可以使用bootstrap提供的样式了。

字体图标

bootstrap默认提供了二百多个图标。我们可以通过span标签来使用这些图标：

<h3>图标</h3> 
 <span class="glyphicon glyphicon-home"></span>
 <span class="glyphicon glyphicon-signal"></span>
 <span class="glyphicon glyphicon-cog"></span>
 <span class="glyphicon glyphicon-apple"></span>
 <span class="glyphicon glyphicon-trash"></span>
 <span class="glyphicon glyphicon-play-circle"></span>
 <span class="glyphicon glyphicon-headphones"></span>

BootStrop前端框架入门教程详解

按钮

<button></button>标签用于创建按钮，bootstrap提供了丰富的按钮样式。

<h3>按钮</h3>
 <button type="button" class="btn btn-default">按钮</button>
 <button type="button" class="btn btn-primary">primary</button>
 <button type="button" class="btn btn-success">success</button>
 <button type="button" class="btn btn-info">info</button>
 <button type="button" class="btn btn-warning">warning</button>
 <button type="button" class="btn btn-danger">danger</button>
 <h3>按钮尺寸</h3>
 <button type="button" class="btn btn-default">按钮</button>
 <button type="button" class="btn btn-primary btn-lg">primary</button>
 <button type="button" class="btn btn-success btn-sm">success</button>
 <button type="button" class="btn btn-info btn-xs">info</button>
 <h3>把图标显示在按钮里</h3>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span>  按钮</button>

 

按钮除了有默认的大小外，bootstrap还提供三个参数来调整按钮的大小，分别是：btn-lg、btn-sm和btn-xs。

BootStrop前端框架入门教程详解

下拉菜单

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

<h3>下拉菜单</h3>
 <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

BootStrop前端框架入门教程详解

输入框

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

<h3>输入框</h3>
 <div class="input-group">
  <span class="glyphicon glyphicon-user"></span>
  <input type="text" placeholder="username">
 </div>
 <div class="input-group">
  <span class="glyphicon glyphicon-lock"></span>
  <input type="password" placeholder="password">
 </div>

BootStrop前端框架入门教程详解

导航栏

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

<h3>导航栏</h3>
 <nav class="navbar navbar-inverse navbar-fixed-top">
  <div id="navbar" class="navbar-collapse collapse">
   <ul class="nav navbar-nav">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#about">About</a></li>
   <li><a href="#contact">Contact</a></li>
   <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li class="divider"></li>
    <li class="dropdown-header">Nav header</li>
    <li><a href="#">Separated link</a></li>
    </ul>
   </li>
   </ul>
  </div><!--/.nav-collapse -->
  </div>
 </nav>

BootStrop前端框架入门教程详解

表单

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

<h3>表单</h3>
 <form>
 <div class="form-group">
  <span class="glyphicon glyphicon-user"></span>
  <input type="email" id="exampleInputEmail1" placeholder="Enter email">
 </div>
 <div class="form-group">
  <span class="glyphicon glyphicon-lock"></span>
  <input type="password" id="exampleInputPassword1" placeholder="Password">
 </div>
 <div class="form-group">
  <label for="exampleInputFile">File input</label>
  <input type="file" id="exampleInputFile">
  <p class="help-block">Example block-level help text here.</p>
 </div>
 <div class="checkbox">
  <label>
  <input type="checkbox"> Check me out
  </label>
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
 </form>

BootStrop前端框架入门教程详解

警告框

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

<h3>警告框</h3>
 <div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
 </div>
 <div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">success!</a>
 </div>
 <div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">info!</a>
 </div>
 <div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">warning!</a>
 </div>
 <div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">danger!</a>
 </div>

BootStrop前端框架入门教程详解

进度条

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

<h3>进度条</h3>
 <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  70%
  </div>
 </div>

 BootStrop前端框架入门教程详解

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

BootStrop前端框架入门教程详解

- Author -

xxf159797

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
js轮播图代码分享
Jul 14 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
javascript实现前端成语点击验证
Jun 24 Javascript
半个小时学json(json传递示例)
Dec 25 #Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 #Javascript
JS如何生成一个不重复的ID的函数
Dec 25 #Javascript
js Canvas实现的日历时钟案例分享
Dec 25 #Javascript
ES6概念 Symbol toString()方法
Dec 25 #Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 #Javascript
ES6概念 ymbol.for()方法
Dec 25 #Javascript
电磁辐射(1) 天线(6) 调幅(1) 短波(1) SW(1) 发报机(1) 电路图(1) 电台(1) LW(1) FM(4)
You might like
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
php中in_array函数用法分析
2014/11/15 PHP
php cli配置文件问题分析
2015/10/15 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
javascript jq 弹出层实例
2013/08/25 Javascript
JSONP之我见
2015/03/24 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
vue实现输入框的模糊查询的示例代码（节流函数的应用场景）
2019/09/01 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
Python实现的读写json文件功能示例
2018/06/05 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
python生成requirements.txt的两种方法
2019/09/18 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
Python unittest框架操作实例解析
2020/04/13 Python
凯伦·米莲女装网上商店：Karen Millen
2017/11/07 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店：FitBoxx
2019/12/05 全球购物
主持词开场白
2014/03/17 职场文书
入党积极分子评语
2014/05/04 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
就业证明函
2015/06/17 职场文书
九年级英语教学反思
2016/02/15 职场文书
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers