[bootstrap] bootstrap 简介和相关网址

Bootstrap 来自 Twitter，是目前很受欢迎的前端框架。

基于 HTML、CSS、JAVASCRIPT ，简洁灵活，使 Web 开发更加快捷。

Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less(CSS 预处理器，让 CSS 具有动态性)写成。

目前使用较广的是版本2和3，其中2的最新版本的是2.3.2，3的最新版本是3.3.5。

包含了丰富的Web组件：

下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象、模式对话框、标签页、滚动条、弹出框等。

1、相关网址

Bootstrap 中文网

　　http://v3.bootcss.com/

起步

　　http://v3.bootcss.com/getting-started/#download
　　http://docs.bootcss.com/bootstrap-2.3.2/docs/getting-started.html#html-template

样式字典
　　布局和栅格：http://docs.bootcss.com/bootstrap-2.3.2/docs/scaffolding.html
　　基本css：http://docs.bootcss.com/bootstrap-2.3.2/docs/base-css.html
　　组件：http://docs.bootcss.com/bootstrap-2.3.2/docs/components.html

js字典
　　http://docs.bootcss.com/bootstrap-2.3.2/docs/javascript.html

定制自己的bootstrap
　　http://docs.bootcss.com/bootstrap-2.3.2/docs/customize.html

源码下载


【简化版本】http://d.bootcss.com/bootstrap-3.3.5-dist.zip

【源码版本】http://d.bootcss.com/bootstrap-3.3.5.zip

2、国内 Bootstrap CDN 加速服务

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入。而且jquery的版本最好是>=1.9.1

3、Bootstrap 的基本文件结构

bootstrap/

├── css/

│   ├── bootstrap.css

│   ├── bootstrap.css.map

│   ├── bootstrap.min.css

│   ├── bootstrap-theme.css

│   ├── bootstrap-theme.css.map

│   └── bootstrap-theme.min.css

├── js/

│   ├── bootstrap.js

│   └── bootstrap.min.js

└── fonts/

    ├── glyphicons-halflings-regular.eot

    ├── glyphicons-halflings-regular.svg

    ├── glyphicons-halflings-regular.ttf

    ├── glyphicons-halflings-regular.woff

    └── glyphicons-halflings-regular.woff2

4、基本模版

<!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 href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

5、一些例子

【主题】http://v3.bootcss.com/examples/theme/

【栅格】http://v3.bootcss.com/examples/grid/

【普通导航条】http://v3.bootcss.com/examples/navbar/ http://v3.bootcss.com/examples/navbar-static-top/

【固定顶部导航条】http://v3.bootcss.com/examples/navbar-fixed-top/

【自定义组件】

封面图：http://v3.bootcss.com/examples/cover/

旋转木马carousel：http://v3.bootcss.com/examples/carousel/

博客页面：http://v3.bootcss.com/examples/blog/#

控制台：http://v3.bootcss.com/examples/dashboard/

登录页：http://v3.bootcss.com/examples/signin/

自适应nav：http://v3.bootcss.com/examples/justified-nav/

6、Bootlint 工具

Bootlint 是 Bootstrap 官方所支持的 HTML 检测工具。
在使用了 Bootstrap 的页面上（没有对 Bootstrap 做修改和扩展的情况下），它能自动检查某些常见的 HTML 错误。
纯粹的 Bootstrap 组件需要固定的 DOM 结构。Bootlint 就能检测你的页面上的这些“纯粹”的 Bootstrap 组件是否符合 Bootstrap 的 HTML 结构规则。
建议将 Bootlint 加入到你的开发工具中，这样就能帮你在项目开发中避免一些简单的错误影响你的开发进度。

7、基于bootstrap的一些优秀网站推荐

http://expo.bootcss.com/

8、图标

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] bootstrap 简介和相关网址的更多相关文章

超微 X9DRL-iF 服务器主板简介 BIOS相关图解
超微 X9DRL-iF 服务器主板简介 BIOS相关图解板载串口阵列相关简介网烁信息805 发布时间:2012-6-15 21:10:09 浏览数:2745 随着Intel E5至强的 ...
IdentityServer4 中文文档 -2- （简介）相关术语
IdentityServer4 中文文档 -2- (简介)相关术语原文:http://docs.identityserver.io/en/release/intro/terminology.html ...
网络基础 Windows telnet使用简介及相关问题解决方案
Windows telnet使用简介及相关问题解决方案 by:授客 QQ:1033553122 更改telnet的默认端口(23)(仅适用XP) 步骤: 进入cmd控制窗口 tlntadmn conf ...
webgl图库研究（包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、适用范围、支持格式、优缺点、相关网址）
3D图库框架范围与示例摘要: 为实现企业80%以上的生产数据进行智能转化,在烟草.造纸.能源.电力.机床.化肥等行业,赢得领袖企业青睐,助力企业构建AI赋能中心,实现智能化转型升级.“远舢文龙数据处 ...
iOS 开发，相关网址
iOS 开发,相关网址说明网址注册开发者 https://developer.apple.com/cn/programs/enroll/ 未付费688个人开发账号真机调试测试教程 http:// ...
Bootstrap 小技巧以及相关资源整理
1, Bootstrap Bundle (http://bootstrapbundle.com/): 提供了15中不同的MVC Bootstrap模板.[扩展和更新]中搜索“Bootstrap Bu ...
Bootstrap的简介及使用
一.Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.javascript 的,它简洁灵活,使得 Web 开发更 ...
1.bootstrap基础简介
一·基础简介 1.Bootstrap,来自 Twitter,是一个用于快速开发 Web 应用程序和网站的前端框架,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CSS.JavaSc ...
Bootstrap 3 简介
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first pr ...

随机推荐

Java程序员必备的6款最佳开发工具
工欲善其事,必先利其器.每一个Java程序员都有其惯用的工具组件.对于Java程序员,各种有用的软件和工具泛滥成灾.初级开发人员要么找不到合适的工具,要么在寻找过程中浪费了大量的时间.下面,我将为大家 ...
VS2013自动注释插件
在程序编写的时候,你是否见过这种写法?整个项目每个cs文件头部都包含一个,版权,版本等信息的注释头? 类似这个类文件: /*************************************** ...
git -C
https://git-scm.com/docs/git -C <path> Run as if git was started in <path> instead of th ...
NYOJ 士兵杀敌（三）
描述南将军统率着N个士兵,士兵分别编号为1~N,南将军经常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进行比较,计算出两个人的杀敌数差值,用这种方法一方面能鼓舞杀敌数高的人,另一方面也算是批评杀敌 ...
Linux下C程序的编译，运行，及调试
先查看linux有没有gcc 和 gdb $ gcc -v $ gdb -v 如果没有安装gcc,可以 $ yum install gcc 要获取管理员权限才能安装软件,$ su root (有的li ...
java实现将资源文件转化成sql语句导入数据库
文档结构
JavaScript基础知识点
本书目录第一章: JavaScript语言基础第二章: JavaScript内置对象第三章: 窗口window对象第四章: 文档document对象第五章: 表单form对象第六章: ...
在Android中查看和管理sqlite数据库
在Android中可以使用Eclipse插件DDMS来查看,也可以使用Android工具包中的adb工具来查看.android项目中的sqlite数据库位于/data/data/项目包/databas ...
Android开发面试经——5.常见面试官提问Android题①
版权声明:本文为寻梦-finddreams原创文章,请关注:http://blog.csdn.net/finddreams 关注finddreams博客: http://blog.csdn.net/f ...
[转]C++中引用（&）的用法和应用实例
from: here 对于习惯使用C进行开发的朋友们,在看到c++中出现的&符号,可能会犯迷糊,因为在C语言中这个符号表示了取地址符,但是在C++中它却有着不同的用途,掌握C++的&符 ...

[bootstrap] bootstrap 简介和相关网址

[bootstrap] bootstrap 简介和相关网址的更多相关文章

随机推荐

热门专题