1. <span style="font-family: Arial, Helvetica, sans-serif;">最近刚刚接触到BootStrap,在这里总结一下BootStrap的使用方法。</span>

1、BootStrap的下载

Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。即可以在不下载BootStrap的情况下使用BootStrap。

BootStrap中文网网址:http://www.bootcss.com/

2、在页面中引用BootStrap

  1. <meta charset="utf-8">
  2. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  3. <meta name="viewport" content="width=device-width, initial-scale=1">
  4. <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
  1. <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
  1. <!--<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>-->
  2. <!-- Include all compiled plugins (below), or include individual files as needed -->
  3. <!--<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js">-->

在没有下载BootStrap的时候,引用BootStrap中文网为我们提供的css库和js库。当我们下载BootStrap的时候,则引用本地的库文件:

  1. <link rel="stylesheet" href="css/bootstrap.min.css">
  1. <script src="js/bootstrap.min.js"></script> <!-- 解压后的本地文件 -->
  2. <!-- Include all compiled plugins (below), or include individual files as needed -->
  3. <script src="js/jquery-2.1.4.min.js">

3、使用BootStrap为我们提供的样式和效果

在页面中我们只需要引用BootStrap为我们写好的类选择器即可获得BootStrap的各种效果。比如:

(1)按钮样式:

*按钮的大小采用.btn-large.btn-small, 或 .btn-mini

通过添加.btn-block 创建块级按钮, 同时会填充整个父级的宽度

*按钮的可用与否采用.disabled

其他的就不多说了,以上示例来自BootStrap官网。

说明:以上示例来自http://bootstrap.kinghack.com/base-css.html,大家也可以通过这个网站来学习BootStrap的使用。

【BootStrap】初步教程的更多相关文章

  1. <<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫

    并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/he ...

  2. BootStrap入门教程 (一)

    BootStrap入门教程 (一)   2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...

  3. (转帖)BootStrap入门教程 (一)

      2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MAR ...

  4. BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  5. <转载>Bootstrap 入门教程 http://www.cnblogs.com/ventlam/archive/2012/05/28/2520703.html 系列

    Bootstrap建立了一个响应式的12列格网布局系统,它引入了fixed和fluid-with两种布局方式.我们从全局样式(Global Style),格网系统(Grid System),流式格网( ...

  6. bootstrap实战教程

    bootstrap实战教程 bootstrap介绍 简介 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.全球数以百万计的网站都是 ...

  7. 每周一书-《Bootstrap基础教程》

    首先说明,本周活动有效时间为8月15日到21日.本周为大家送出的书是有电子工业出版,贺臣/陈鹏编著的<Bootsrap基础教程>,为前端入门必读书籍. 下面是从书中摘录的内容. “ Boo ...

  8. (转帖)BootStrap入门教程 (三)

      上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整 ...

  9. Bootstrap:教程、简介、环境安装

    ylbtech-Bootstrap:教程.简介.环境安装 1. Bootstrap 教程返回顶部 1. Bootstrap 教程 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.B ...

随机推荐

  1. 用JS制作简易的可切换的年历,类似于选项卡

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  2. PHP 使用CURL

    CURL是一个非常强大的开源库,支持很多协议,包括HTTP.FTP.TELNET等,我们使用它来发送HTTP请求.它给我 们带来的好处是可以通过灵活的选项设置不同的HTTP协议参数,并且支持HTTPS ...

  3. c# 验证码类

    using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; us ...

  4. lvs主备可以自由切换,vip落在主上的时候,端口无法telnet,业务连接不了

    lvs主备可以自由切换,vip落在主上的时候,端口无法telnet,业务连接不了 解决:将主上的keepalived重启,故障解除 原因:不可知 lvs常见故障原因: real server上的脚步没 ...

  5. 小程序 - c字符串表示大整数

    #define max(a, b) ((a) > (b) ? (a) : (b)) static char* reverse(char *str) { char *l, *r, c; ; l & ...

  6. MVC项目创建与项目结构介绍

    一.创建MVC项目 打开VS202,点击:文件—>新建—>项目—>Web—>Asp.Net MVC 4 Web应用程序 填好项目名称.解决方案名称和文件存放位置,然后点击确定, ...

  7. android firmware 利用UDP socket发送Magic Packet--python版本

    android firmware 利用UDP socket发送Magic Packet--python版本 #!/usr/bin/python import sys, time from struct ...

  8. 备份数据库的时候设置 BufferCount 选项不正确导致 out of memory 的情况

    备份数据库的时候设置 BufferCount 选项不正确导致 out of memory 的情况 今天群里面的东辉兄跟我说备份生产数据库的时候报错 环境: 32位的SQLSERVER2008 机器有1 ...

  9. ASP.NET 5系列教程 (三):view components介绍

    在ASP.NET MVC 6中,view components (VCs) 功能类似于虚拟视图,但是功能更加强大. VCs兼顾了视图和控制器的优点,你可以把VCs 看作一个Mini 控制器.它负责控制 ...

  10. mysql导入sql文件

    从命令提示符下到MYSQL文件目录中的Bin文件夹下,执行命令 mysql -u root -p databasename < db.sql 其中root是你MYSQL的用户名,database ...