bootstrap网站制作（bootstrap网站案例）

本文目录一览：

• 1、bootstrap开发 用什么工具
• 2、如何用 bootstrap 创建一个网站
• 3、bootstrap 网页实例 常用样式
• 4、如何使用bootstrap开发网站
• 5、如何用Bootstrap制作WordPress主题
• 6、Bootstrap简介

bootstrap开发 用什么工具

1. Jetstrap

Jetstrap 是一个完全基于 Web 的，用于 Twitter Bootstrap 的界面构建工具，专为开发人员，设计师和打造。Jetstrap 帮助您快速创建出漂亮网站，只需要花费很少的精力。

2. Bootply

Bootply 让你可以方便的调试 Bootstrap。编辑 CSS ，HTML 和 JavaScript。可以使用 Bootply 设计，原型，扩展或测试 Bootstrap 框架。Bootply 集成了其他流行的 Bootstrap 插件，微型库和框架。

3. DivShot

Divshot 是一个基于拖放的前端编辑器，允许你使用 Twitter Bootstrap（当然 Foundation 也可以）建立响应式的网站，不需要自己动手编码，只需要进行简单的拖放操作即可。

4. Bootstrap Magic

Bootstrap Magic 主题生成器基于 Twitter Bootstrap 3 和 AngularJS 构建。您可以轻松快速地创建您自己的 Twitter Bootstarp 主题。你可以立即看到你正在改变的内容是什么，您还可以添加来自 Google Webfont 的精美网页字体。

5. Layoutit

LayoutIt 是一个 Twitter Bootstrap 界面生成器，能够帮助你快速制作出网站和界面模型，同时能够下载生成的网站代码。简单的几个拖放操作就能做出漂亮的 Twitter Bootstrap 网站。所有的设计都可以是响应式 CSS 和流体，能够份容易与任何的编程语言集成，您只需下载 HTML 即可开始编码设计。

6. X-editable

X-editable 支持就地编辑 Twitter Bootstrap， jQuery UI 或纯 jQuery。这个库允许你在自己的网页上创建可编辑元素。它包括弹出式和内嵌模式。它支持的输入元素包括文字，文本区域，下拉列表，日期， dateui 和 checklist。它支持客户端和服务器端验证。另外容器的位置是完全可定制的，用户可以通过单击，双击自动或手动切换。

7. Grid Displayer

Grid Displayer 是一个书签工具，可以用于显示 Twitter Bootstrap（固定和流体网格）和 Foundation（ 2.0 和 3.0 ）的网格 。它支持 Firefox 和 WebKit 核心的浏览器。

8. GetkickStrap

Kickstrap 完美结合 Bootstrap，采用顶级的 Web 技术。它可以运行经过验证的，数据库驱动的 Web 应用程序，不需要原生后台。Kickstrap 结合 JSPM.io 提供了建立在 Require.js 的强大的前端软件包的依赖关系。 Kickstrap 应用程序是可以在任何时间在 Web 应用程序的生命周期中运行的静态资源集合。

9. Font Awesome

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标，除了包括 Twitter Boostrap 的默认图标外，还有社交网络图标、Web 应用程序图标和编辑器图标等等，可以免费用于商业项目。

10. Bootstrap Button Generator

这是一款很好用的 Twitter Bootstrap 按钮生成工具，你只需要输入你要分配的新的按钮样式，并与不同的按钮颜色搭配，更新就可以即时预览。

11. Easel

Easel 是一个令人印象深刻的 Twitter Bootstrap 设计工具，可让你在文档中的特定元素链接到其他文件的原型应用程序中。你甚至可以有你的用户通过测试让你得到尽早的在反馈。

12. Fancyboot

Fancyboot 是一个简单但功能强大的 Twitter Bootstrap 定制工具，控制的恰到好处，移除了所有不必要的复杂性。

13. Bootstrap Designer

Bootstrap Designer 是一个在线设计工具，可以制作出很漂亮的基于 Twitter Bootstrap 的 HTML5 模板。可以创建不同的设计风格：简约风格，黑白，排版驱动的，单色的外观，干净及创意等。

14. Bootsnipp

Bootsnipp 是一个元素画廊，为网页设计师和 Web 开发人员设计，任何人使用 Twitter Bootstrap 都会发现在他们的工作是必不可少的。

15. PaintStrap

Paintstrap 让你可以生成使用漂亮的 Twitter Bootstrap 主题，使用 Adobe Kuler 或者 COLOURlovers 配色。

如何用 bootstrap 创建一个网站

bootstrap只是前台模板

创建网站不只有前台，还要有后台

如果想建站，还是需要学习一下后台的语言

比如JAVA、PHP等

至于bootstrap如何建站，官方有API的

用到什么控件就按照格式来

希望能帮助到你

bootstrap 网页实例 常用样式

!DOCTYPE html

html

head

meta charset="utf-8"

titleBootstrap 实例 - 一个简单的网页/title

link rel="stylesheet" href=""

script src=""/script

script src=""/script

style

.fakeimg {

height: 200px;

background: #aaa;

}

/style

/head

body

div class="jumbotron text-center" style="margin-bottom:0"

h1我的第一个 Bootstrap 页面/h1

p重置浏览器窗口大小查看效果！/p

/div

nav class="navbar navbar-inverse"

div class="container-fluid"

div class="navbar-header"

button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"

span class="icon-bar"/span

span class="icon-bar"/span

span class="icon-bar"/span

/button

a class="navbar-brand" href="#"网站名/a

/div

div class="collapse navbar-collapse" id="myNavbar"

ul class="nav navbar-nav"

li class="active"a href="#"主页/a/li

lia href="#"页面 2/a/li

lia href="#"页面 3/a/li

/ul

/div

/div

/nav

div class="container"

div class="row"

div class="col-sm-4"

h2关于我/h2

h5我的照片:/h5

div class="fakeimg"这边插入图像/div

p关于我的介绍../p

h3链接/h3

p描述文本。/p

ul class="nav nav-pills nav-stacked"

li class="active"a href="#"链接 1/a/li

lia href="#"链接 2/a/li

lia href="#"链接 3/a/li

/ul

hr class="hidden-sm hidden-md hidden-lg"

/div

div class="col-sm-8"

h2标题/h2

h5副标题/h5

div class="fakeimg"图像/div

p一些文本../p

p菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！/p

h2标题/h2

h5副标题/h5

div class="fakeimg"图像/div

p一些文本../p

p菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！/p

/div

/div

/div

div class="jumbotron text-center" style="margin-bottom:0"

p底部内容/p

/div

/body

/html

如何使用bootstrap开发网站

本文将向您介绍如何使用 Bootstrap 快速开发网站和应用程序，包括移动友好型应用程序。本文反映了开发人员的观点，而不是设计人员的观点。要想从本文和 Bootstrap 中获益，您需要掌握 HTML 和 CSS 的应用知识

如何用Bootstrap制作WordPress主题

1.先用bootstrap做好网站静态模板文件;

如下

index.html索引文件

home.html首页

single.html文章页面

arctive.html分类页面

category.html分类页面

page.html页面

search.html页面

404.html页面

style.css自定义样式

文件夹images引用的图片

文件夹css引用的css文件

文件夹js引用的js文件

2.再把静态模板文件换成动态模板文件，即把html换成php文件；

如下

index.php索引文件

home.php首页

single.php文章页面

arctive.php分类页面

category.php分类页面

page.php页面

search.php页面

404.php页面

style.css自定义样式

文件夹images引用的图片

文件夹css引用的css文件

文件夹js引用的js文件

Bootstrap简介

什么是Bootstrap？

Bootstr是一个用于快速开发web应用程序和网站的前端框架，Bootstrap是基于HTML，Css，JavaScript的。

Bootstrap历史：

        Bootstrap是由Twitt的Mark Otto和Jecob Thomton开发的。Bootstrap是2011年八月在Github上发布开源产品。

Bootstrap的优点：

       1.所有主流浏览器都支持Bootstrap。

        2.容易上手。

        3.响应式设计：Bootstrap的响应式能够自适应与台式机、平板电脑和手机。

        4.包含了强大的内置组件，易于定制。

        5.提供了基于web定制。

        6.Bootrap是开源的。

Bootstrap包含的内容 ：

        基本结构：Bootstrap提供了一个带有网络系统、链接样式、北京的基本结构。

        css：Bootstrap自带一下特性：全局css设置、定义基本的HTML元素样式、可扩展class、以及一个先进的网格系统。

        javascript 插件：Bootstrap包含了十几个自定义的的jq插件。你可以直接包含所有的插件，也可以逐个包含这些插件。

        组件：Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

        定制：你可以定制Bootstrap的组件、lESS 变量和jQuer插件来得到你自己的版本。