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

Bootstrap精简教程

Posted in Javascript onNovember 27, 2015

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web开发更加快捷。[1]它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。[2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

特点：

Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

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>

Bootstrap精简教程

按钮

<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。

Bootstrap精简教程

下拉菜单

下拉菜单是最常见的交互之一，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>

Bootstrap精简教程

输入框

通过<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>

 Bootstrap精简教程

导航栏

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

<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>

Bootstrap精简教程

表单

人与系统之间数据的传递都需要依靠表单来完成。比如注册/登录信息的提交，查询条件的提交等。用<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>

 Bootstrap精简教程

警告框

警告框是系统向用户传达信息和提供指引的重要手段。没有针对警告框的标签，通过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>

  Bootstrap精简教程

进度条

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

<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>

Bootstrap精简教程

- Author -

虫师

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

Javascript 相关文章推荐
JAVASCRIPT对象及属性
Feb 13 Javascript
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 #Javascript
Bootstrap每天必学之导航条
Nov 27 #Javascript
javascript设计模式--策略模式之输入验证
Nov 27 #Javascript
jQuery实现图片预加载效果
Nov 27 #Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 #Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 #Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 #Javascript
vue-cli3.x(1) TimePickerView(1) watch(1) Yolov5(1) 项目打包(2) Jmerte(1) vue-router-link(1) 监听(2) scss(1) sched(1)
You might like
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
JQuery datepicker 使用方法
2011/05/20 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
python删除列表内容
2015/08/04 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python实现定时提取实时日志程序
2018/06/22 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
python中实现控制小数点位数的方法
2019/01/24 Python
python and or用法详解
2019/06/26 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
学生宿舍管理制度
2014/01/30 职场文书
应届生求职自荐信
2014/07/04 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
行政前台岗位职责
2015/04/16 职场文书
就业意向书范本
2015/05/11 职场文书
《秋思》教学反思
2016/02/23 职场文书