1.简介


Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,可以认为bootstrap就是一个样式库。

  • 它为开发人员创建接口提供了一个简洁统一的解决方案。
  • 它包含了功能强大的内置组件,易于定制。
  • 它还提供了基于 Web 的定制。
  • 它是开源的。

2.下载与文档说明


2.1 下载

  官方网站:http://getbootstrap.com/

  中文网站:http://www.bootcss.com/

  第三方网站:http://bootstrap.evget.com/

  学习网站:链接1   链接2

  前三个网站都提供了该框架的下载链接,并且有详细的说明与示例代码来介绍bootstrap的使用方法。第三方网站比较精简一些,可以快速上手。学习网站推荐使用链接1,链接2我们可以当作手册来使用,方便我们平时的查找。

2.2 文档说明

  版本:bootstrap-3.3.5-dist.zip

  

  css是bootstrap的核心部分,其中包括一下内容,其中bootstrap.css(含有注解)和bootstrap.min.css(不含注解)是我们经常长用到的,theme一般不使用。

  

  fonts:中放置了一些css中使用到的小图标

  js中提供了对下拉菜单,对话框的控制等等,如果我们要使用的话需要引入该文件

3.快速上手


  1.用dreamweaver新建一个HTML5工程,dreamweaver版本为CC 2015

  

  

  2.引入bootstrap

  

  

  引入成功

  

  3.如果要使用bootstrap中提供的js插件,我们首先的引入JQuery.js插件,下载地址

  

  

  引入成功

  

  4.细节处理

  修正网页在移动设备上的显示:

  在head标签中加入一下内容 <meta name="viewport" content="width=device-width,initial-scale=1"/>

  兼容低版本IE浏览器

  在head中加入

  <!--[if lt IE 9]>

    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

  <![endif]-->

Boostrap(1)的更多相关文章

  1. Boostrap入门(一)

    1.第一步:下载Boostrap有关文件 Boostrap中文网:http://www.bootcss.com/ -->--> 2.第二步: 如下代码:引入相关文件即可. <!DOC ...

  2. Boostrap

    基本认知: Boostrap绝对是目前最流行用得最广泛的一款框架.它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面. Bootstrap的优缺点: 缺点: 1. ...

  3. 【转】Validate + Boostrap tooltip 表单验证示例

    一.工具准备: 1.boostrap: 下载地址 http://getbootstrap.com/ jquery: jQuery版本需大于或等于1.8.0  jquery.validate.min.j ...

  4. 用H5+Boostrap做简单的音乐播放器

    前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做完这个Demo也算是暂告一段落,接下来是j ...

  5. vue.js+boostrap最佳实践

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...

  6. 我发现调用boostrap的弹框

    在引用了boostrap.js和boostrap.css之后 本来boostrap是基于jQuery的.但是我们的项目里没有用jQuery,而是用的zepto. 调用boostrap的弹框有两种方式: ...

  7. Boostrap栅格系统

    Boostrap排版.链接样式设置了基本的全局样式.分别是:为body元素设置 布局容器:Bootstrap需要为页面内容和栅格系统包裹一个:container容器.Bootstrap提供了两个作此用 ...

  8. boostrap中lg,md,sm,xs

    boostrap中lg,md,sm,xs分别表示多少px? .col-xs- 超小屏幕 手机 (<768px).col-sm- 小屏幕 平板 (≥768px).col-md- 中等屏幕 桌面显示 ...

  9. AngularJS Boostrap Pagination Sample

    首先,样式是这样的 首先,Service端是Webapi REST JSON格式 第二,我们建立一个Wrapper Class,这里你也可以定义一个Generic<T>,作为示例,我们这里 ...

  10. H5+Boostrap的音乐播放器

    H5+Boostrap做简单的音乐播放器 前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做 ...

随机推荐

  1. Windows Log4日志发送到ElasticSearch

    处理多行数据到elasticsearch Nxlog 配置 <Input in> Module im_file File "E:\\log\\webapi\\\err.log&q ...

  2. Kali Linux 网络扫描秘籍 翻译完成!

    Kali Linux 网络扫描秘籍 翻译完成! 原书:Kali Linux Network Scanning Cookbook 译者:飞龙 在线阅读 PDF格式 EPUB格式 MOBI格式 代码仓库 ...

  3. tfs witadmin

    有时候对TFS的操作需要使用命令行,因为无图形界面进行操作. 我们可以进入Visual Studio Tools使用Developer Command Prompt进行操作. 使用命令 witadmi ...

  4. [转载]在iTOP-4412开发板上调试helloworld应用

    本文转自迅为论坛:http://www.topeetboard.com 1.安装ADB驱动 在开发板上调试 Android 应用,首先要安装 ADB 驱动. 通过“SDK Manager.exe”来安 ...

  5. CentOS 6.5部署安装Memcached

    1. Yum安装Memcache 查找memcached yum  search  memcached 该命令可以查询yum库中有关memcached的安装包信息,以下是搜寻结果截图: 安装 memc ...

  6. Legendre polynomials

    In mathematics, Legendre functions are solutions to Legendre's differential equation: In particular, ...

  7. Django项目中如何建表?怎样导入数据?

    http://django-chinese-docs.readthedocs.org/en/latest/topics/db/models.html 通常在项目中的models.py文件中建表的 Th ...

  8. MySQL数据库学习笔记(五)----MySQL字符串函数、日期时间函数

    一.常见字符串函数: 1.CHAR_LENGTH  获取长度(字符为单位) 2.FORMAT  格式化 3.INSERT  替换的方式插入 4.INSTR  获取位置 5.LEFT/RIGHT  取左 ...

  9. Android系列----JUnit单元测试的使用

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  10. Unity开发之NGUI系列

    Unity插件收集 在Unity开发过程中会收集一些插件,收集这些插件的目的并不是我喜欢在开发中使用插件,而是本着喜欢的态度去收集的,就像我喜欢收集模型一样: 还有一点就是通过了解插件能让我知道Uni ...