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>

Javascript 相关文章推荐
JavaScript XML操作 封装类
Jul 01 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
详解CocosCreator项目结构机制
Apr 14 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
You might like
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
PHP基本语法实例总结
2016/09/09 PHP
php实现文章评论系统
2019/02/18 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python进行TCP端口扫描的实现
2018/12/21 Python
python中使用while循环的实例
2019/08/05 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
爱情寄语大全
2014/04/09 职场文书
竞聘自述材料
2014/08/25 职场文书
法制演讲稿
2014/09/10 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js