Bootstrap精简教程中秋大放送


Posted in Javascript onSeptember 15, 2016

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精简教程中秋大放送

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

下拉菜单

下拉菜单是最常见的交互之一,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精简教程中秋大放送

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

Javascript 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
原生js的数组除重复简单实例
May 24 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
AngularJS 指令的交互详解及实例代码
Sep 14 #Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 #Javascript
什么是JavaScript注入攻击?
Sep 14 #Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 #Javascript
再谈javascript注入 黑客必备!
Sep 14 #Javascript
AngularJS 表达式详解及实例代码
Sep 14 #Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 #Javascript
You might like
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
python实现简单的计时器功能函数
2015/03/14 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
python实现图片批量压缩程序
2018/07/23 Python
Python语言进阶知识点总结
2019/05/28 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
如何填写个人简历自我评价
2013/12/10 职场文书
初二生物教学反思
2014/02/03 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
电子商务实训报告总结
2014/11/05 职场文书
工作试用期自我评价
2015/03/10 职场文书
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android
Elasticsearch 索引操作和增删改查
2022/04/19 Python