起步 简介整个项目、组件、和如何使用一个简单的模版入门

1. 下载

下载之前先检查一下是否准备好了一个代码编辑器(我们推荐使用 Sublime Text 2) ，你是否已经掌握了足够的HTML和CSS知识以开展工作。这里我们不详述源码文件，但是它们可以随时被下载。在这里我们只着重介绍使用已经编译好的Bootstrap文件进行入门讲解。

下载编译好的文件

快速开始:立即下载编译好的版本吧，里面已经包含了CSS、JS和图片文件了，而且所有文件已经经过了压缩处理。不过，文档和源码文件不包含哦。

下载Bootstrap

下载源码

从GitHub直接下载到的最新版的源码包括CSS、JavaScript的源文件，以及一份文档。

下载Bootstrap源码

2. 文件结构

在下载的压缩包中你可以看到如下的文件结构和内容。所有文件按逻辑进行分类存储，并且提供了编译和压缩两个版本的文件。

将下载的文件解压缩之后就可以看到如下的文件结构：

  bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

这就是Bootstrap的基本结构：编译后的文件可以快速应用于任何web项目。我们提供了编译版的CSS和JS文件 (bootstrap.*)，也同时提供了编译并压缩之后的CSS和JS文件 (bootstrap.min.*)。图片文件是使用 ImageOptim 工具进行压缩的，这个工具是Mac平台上用于压缩PNG文件的一个app。

请注意，所有的JavaScript插件都依赖jQuery库。

3. 包含了哪些东西

Bootstrap中的HTML、CSS和JS适用于各类设备, 不过它们可以被概括成几个类别，请看本文档顶部的导航条。

文档章节

脚手架

全局性的样式文件，用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构。

基本CSS样式

常见的HTML元素 -- 如排版、代码、表格、表单、和按钮的样式。还包括 Glyphicons, 一个非常棒的图标集。

组件

常见界面组件 -- 如标签、pill、导航、警告、页面标题的基本样式。

JavaScript插件

和组件类似，这些Javascript插件用来实现提示(tooltip)、弹出框(popover)、模态对话框(modal)等具有交互性的组件。

组件列表

组件库 和 JavaScript插件集 一同提供了以下组件元素。

  • 按钮组
  • 按钮下拉菜单
  • 用于导航的标签、pill、列表
  • 导航条
  • Labels
  • Badges
  • Page headers and hero unit
  • 缩略图
  • 警告对话框
  • 进度条
  • 模态对话框(Modals)
  • 下拉菜单(Dropdowns)
  • Tooltips
  • Popovers
  • Accordion
  • Carousel
  • Typeahead

在后面的文档中, 我们会挨个详细的介绍这些组件的细节。在此之前, 先来看看如何使用并定制它们。

4. 基本的HTML模版

为了把注意力完全放到使用Bootstrap上，我们先做一点儿课前准备。为了做到这一点，我们将利用一个基本的HTML模板, 其中包括我们在文件结构一章中提到的所有内容。

现在, 这里展示一个典型的HTML文件：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 101 Template</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. </head>
  7. <body>
  8. <h1>Hello, world!</h1>
  9. <script src="http://code.jquery.com/jquery.js"></script>
  10. </body>
  11. </html>

为了使其成为一个Bootstrap模板, 需要包含相应的 CSS and JS 文件：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 101 Template</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <!-- Bootstrap -->
  7. <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  8. </head>
  9. <body>
  10. <h1>Hello, world!</h1>
  11. <script src="http://code.jquery.com/jquery.js"></script>
  12. <script src="js/bootstrap.min.js"></script>
  13. </body>
  14. </html>

设置成功! 加入这两个文件, 你就可以开始用Bootstrap开发任何网站和应用程序了。

5. 案例

希望下面的几个案例能引导大家在基础模版的基础上做发散性思维。我们鼓励大家参考下面的案例举一反三，而不要仅仅最简模版

一个包含了Bootstrap的所有CSS和JavaScript文件的最简HTML文档。

  • 基本的营销类网站

    具有一个主消息板块和三个辅助性元素。


  • 流式布局

    使用新的响应式布局, 流式栅格系统建立的一个流式布局。


  • 精简版的营销类网站

    适用于小项目或团队的简单、轻量级的营销类模板。


  • 两端对齐的导航条

    带有等宽的导航链接的市场营销类页面，导航条在原始样式的基础上进行了修改。


  • 登录框

    基本的登录表单，使用到了自定义的较大的表单组件和灵活的布局。


  • 页脚固定在底部

    将固定高度的页脚钉在页面可视区域的最下方。


  • 大屏轮播

    一个更具交互、突出轮播的基本营销类网站。

下一步？

根据文档顶部的分类查看更多案例、代码片段, 或定制Bootstrap，为你即将开展的项目做一次彻底改变。

查看 Bootstrap 文档 定制 Bootstrap

起步 简介整个项目、组件、和如何使用一个简单的模版入门

时间： 2024-12-08 03:26:50

起步 简介整个项目、组件、和如何使用一个简单的模版入门的相关文章

Github项目解析（十一）--&gt;一个简单，强大的自定义广告活动弹窗

转载请标明出处:一片枫叶的专栏 上一篇文章中讲解了我最近写的一个快速集成二维码扫描库,其核心的实现扫描的功能,是通过调用ZXing库实现的.由于在实现二维码扫描功能的时候发现集成二维码扫描功能并不是特别方便,于是有了将其制作成标准库的想法,这个二维码库能够快速,方便的集成二维码扫描功能,项目地址是在:android-zxingLibrary**,在项目开源后有不少同学提出了许多不错的意见,目前也在不断的迭代中,自己也学到了很多. 本文我们将讲解一个简单,强大的广告活动弹窗控件.不少App在打开的

Vue.js组件开发：从一个简单的例子说起

<ol> <!-- <li v-for="thing in someThings" > {{ thing.name }} </li> --> <thing-liv-for="thing in someThings" v-bind:something="thing"></thing-li> </ol> li列表的功能是显示一件事情的名字,我们以它作为例子来介绍最简单

Spring Data Redis简介以及项目Demo，RedisTemplate和 Serializer详解

一.概念简介: Redis: Redis是一款开源的Key-Value数据库,运行在内存中,由ANSI C编写,详细的信息在Redis官网上面有,因为我自己通过google等各种渠道去学习Redis,走了不少弯路,所以总结一条我认为不错的学习路径给大家: 1.<The Little Redis Book> 是一本开源PDF,只有29页的英文文档,看完后对Redis的基本概念应该差不多熟悉了,剩下的可以去Redis官网熟悉相关的命令. 2.<Redis设计与实现> 如果想继续深入,推

在Visual Studio中使用组件图描述项目组件依赖关系

如果想描述项目组件的关系,可以考虑使用UML组建图. 在建模项目下添加一个名称为"Applicaiton Component Structure"的UML组建图. 添加各个组件,并添加依赖关系. 在必要的时候,给组件添加备注. 如果想给依赖关系备注,需要在Name属性中设置. 可以为组件添加接口. 备注: ● 明确项目中的可执行程序和组件● 明确各个组件的依赖关系● 必要的时候明确组件的实现接口 参考资料:https://channel9.msdn.com/Blogs/clinted

前端Vue框架 04 路由：逻辑跳转、路由传参 项目组件的数据局部化处理data(){ return{} } 组件的声明周期 组件间通信 各种第三方插件(vuex,axios,element-ui,(jq+bs))

项目初始化 """ 1)根组件:App.vue <template> <div id="app"> <router-view /> </div> </template> 2)路由配置:router/index.js const routes = [ { path: '/', name: 'Home', component: Home } ]; 3)组件:views和components文件夹 i)

分享一个简单易用的RPC开源项目—Tatala

http://zijan.iteye.com/blog/2041894 这个项目最早(2008年)是用于一个网络游戏的Cache Server,以及一个电子商务的Web Session服务.后来不断增加新的功能,除了Java还支持C#,到现在已经可以用它来开发网络游戏的服务器.等过些日子我还会开源网络游戏的服务器源码. 关于性能,当时后台相应请求的效率是每秒10W次,现在我在自己的笔记本上测,只有一个客户端与服务器都在一个物理机上(CPU: i7-3610QM; RAM: 8G; OS: Win

【新建项目&amp;使用viewPager】实现一个Android电子书阅读APP

本章结尾处已放出应用DEMO,已经实现所有本文及后续文章所述全部功能,大家可以先下载下来玩玩看,欢迎在本文下方评论,小方很需要鼓励支持!!! 小说阅读器最终实现效果见上一篇博文 上一篇博文 新建一个项目 呼-我们即将步入安卓开发之旅了,首先要新建一个项目. 选择了开始新项目之后,会打开一个窗口让你设置应用的名字(大写字母开头),还要设置一个类似网址的东西,用来区别不同的开发者,如果你有自己的域名可以像我一样直接设置(宣传一波小方自己的站点-http://xfangfang.cn),或者设置一个自

为您的Web项目构建一个简单的JSON控制器

摘要:无论您的项目使用的是哪种数据库后端,JavaScript Object Notation (JSON) 控制器都能简化您的开发工作.本文将带领您建立一个能够增强您的下一个开发项目的非常基础的 JSON 控制器. 您的下一个 PHP/MySQL 项目可能与您最近完成的十几个项目类似:建立一个 MySQL 数据库,创建包含 HTML 的 PHP 视图,根据需要添加 JavaScript 代码和 CSS 文件,连接到数据库,从数据库提取内容来填充视图,等等.如果您熟悉 web 开发,您一定知道分

ThinkPHP 学习（2）---一个简单的起步的例子

文件夹目录是核心目录ThinkPHP,入口文件是index.php,ThinkPHP里面的文件含义下次详解,接下来是启动一个自己的程序,现在可以修改一下入口文件,一般情况下会将自己的文件放在一个文件夹,我现在是先建立自己的文件夹,一个前台Home文件夹,一个后台文件夹Admin,怎么建立一个结构拥有ThinkPHP功能的文件夹呢?打开index.php,加入如下代码, <?php    //1.确定应用名称Home    define('APP_NAME','Admin');    //2.确定