导航:首页 > 文件教程 > bootstrap网站生成器

bootstrap网站生成器

发布时间:2021-04-04 00:37:15

① 国内有哪些网站用到bootstrap的

http://www.iheima.com/
http://www.ghostchina.com/
http://xueqiu.com/
http://www.ikuai8.com/
http://www.gruntjs.net/
http://www.eyuanku.com/
http://www.huxiu.com/
……
太多了~~
参考这里:http://expo.bootcss.com/

② 怎么用bootstrap做一套网站

bootstrap 主要应用于前端开发,如果你接触过easyui,就差不多理解了,用法相同,如果内没接触过那就不用容太过于纠结easyui了,你去到bootstrap的官方网站下载相应的js以及API文档,里面会叫你使用,里面会有一些案例页面,你用一个编译软件打开你...

③ bootstrap用什么编辑器

以下是 15 款最好的 Bootstrap 编辑器或者是在线编辑工具
1. Bootstrap Magic
这是一个 Bootstrap 主题生成器,使用最新的 Bootstrap 3 版本和 Angular JS 版本,提供一个鲜活的用户修改预览。它包括了各种各样的导入,一个颜色选择器和智能的预先输入。更神奇的是,Bootstrap 会根据用户的每个选择来重新简历框架,方便用户的下载和使用。
2. BootSwatchr
BootSwatchr 是由 Drew Strickiand 独立开发和维护的,是唯一支持从右到左语言显示的 Bootstrap 自定义构建工具,这也是它的特色之一。BootSwatchr 是个可视化的工具,可以从底层开始创建 Bootstrap 主题。
3. Bootstrap Live Editor
Bootstrap Live Editor 是个所见即所得的构建 Bootstrap 的编辑器。在 Bootstrap 准备好的内容和代码片段的基础上提供一个又好又优雅的方法来编辑和美化 html,也因此它是个明智的选择。除此之外,它还包括高级的选项比如按钮配置,自定义标签和为用户做最明智最有益的选择。

4. Fancy Boot
Fancyboot 是个非常有用的 Bootstrap 自定义工具,允许用户编辑 Bootstrap 的配置,自动预览他们的修改结果。通过滑动菜单可以选择需要使用的插件和组件。当用户做好了相应的修改,可以下载一个包含用户所使用的 jQuery 插件的编译好的和简化后的 CSS 文件
5. Style Bootstrap
Style Bootstrap 是个非常棒的内置浏览器的 GUI 实用工具,帮助用户自定义 Twitter Bootstrap 外观。它非常容易进行自定义操作。从 body 风格,字体排版,按钮,导航,格式,通知提示和其他用户很容易根据自己的意愿自定义的元素。除了强大的自定义功能,它还可以很容易生成可下载的 CSS 文件。
6. Lavish
Lavish 是个帮助用户从一个图像中定制自己喜欢的 Bootstrap 配色方案。用户可以从图像中选择各种颜色用在 body 背景,链接,头部,菜单,标签,文本,下拉菜单等等元素上。一旦你确定了 Bootstrap 配色方案,就可以很方便的下载相应的 Boostrap.css 文件。
7. Bootstrap ThemeRoller
Bootstrap ThemeRoller 是个直观的 web 应用程序, 提供一个可视化的界面让用户按照自己的风格创建属于自己的 Bootstrap 主题。有了这个工具,用户可以自定义颜色,大小,字体,格式,表,按钮,警告信息,导航条,菜单等等元素。 这个应用还会帮用户创建的每种风格都生成唯一的一个 URL ,这样就可以保存用户所有的设置。更不可思议的是,当用户离开的时候,用户可以停止或者恢复自己定制的页面。
8. LayoutIt!
LayoutIt!拥有拖拽接口的功能,能简单迅速的构建一个 Bootstrap 前端代码。LayoutIt! 兼容任何的编程语言,允许用户下载 HTML ,在这里自由的进行编码设计。
9. Pingendo
Pingendo 是个可视化的桌面应用程序,允许用户给予流行的 Twitter Bootstrap 框架创建响应式 web 页面原型。Pingendo 还提供大量的现成的布局,拖拽元素的位置,调整大小和自定义的功能。用户可以自行优化他们的页面,插入他们自己的内容。
10. Kickstrap
Kickstrap 是个 Bootstrap UI 编辑器,使用 Firebase 作为一个后台服务。它无缝的接合了 Bootstrap 和顶级的 web 技术。更厉害的是,它可以运行一个已验证的,不需要本地后台支持,数据库驱动的 web 应用。
11. Bootply
Bootply 是一款很棒的 Bootstrap UI 编辑工具,尽可能简单的让用户编辑 Bootstrap 友好的 CSS ,HTML 和 Javascript 。同时也是一个可拖拽的可视化编辑器,用来设计,创建原型和测试 Bootstrap 框架。Bootply 有个代码存储库,里面包括了 Bootstrap 代码片段,示例和模板。除了以上这些,更吸引人的是它有个非常活跃的 Bootply 社区,用户可以很方便的发现,分享和展示相关的代码和片段。
12. X-editable
X-Editable 是一个扩展库,允许用户创建可编辑的元素,比如页面弹出和内联模式。她提供本地的 Bootstrap,jQuery UI 或者是纯 jQuery 编辑功能。此 Bootstrap UI 编辑器拥有许多很强大的功能,包括客户端,服务端验证,支持键盘,live 事件,可定制的容器空间等等。总而言之,它提供非常快速的开发功能,易于删除字段,一个用来更新数据的简简单后台脚本。
13. Jetstrap
不要错误的以为 Jetstrap 只是个简单的实体模型工具,它是 100% 基于 web 接口的 Twitter Bootstrap 构建工具。用户不需要下载任何类型的软件就可以使用 Jetstrap。用户只需要登录,然后构建自己的项目,就可以随时随地进行访问了。构建功能主要是提供给开发者和设计者的,用户很容易就可以通过 Jetstrap 生成漂亮的网站,而且运行速度非常快
14. DivShot
DivShot 是个快速的,可视化的前端开发文本编辑器,跟 mockup 工具一样的简单整洁。包括各种框架需要的各种定制的组件库,这是它提供的最好的工具之一。除此之外还包括了一个主题转换器,允许用户修改主题。试验版本是免费的,过了试验期就需要自己付费维持原来的服务了。
15. PaintStrap
PaintStrap 使用 Adobe kuler/COLOURlovers 颜色组合来生成漂亮的 Twitter Bootstrap 主题。这个工具特别容易安装,同时很容易下载 CSS 文件并且也很容易替换成另一个标准的文件。

④ 如何制作网页界面 bootstrap

到bootstrap官方网站下载,对于我们开发者来说,直接下载编译和压缩后的、JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件。打开解压包之后可以发现包含三个文件夹 css、fonts、js。这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons

2
所有Bootstrap插件都依赖jQuery。而且在正式的项目当中我们推荐使用压缩之后的版本,因为它的体积很小,到官网下载jQuery支持,如图:

3
将下载后的就jQuery放到bootstrap中的js目录下,如图:

4
在bootstrap的根目录下新建一个demo.html文件,(注意,必须在根目录下面新建,因为后面的步骤中要将bootstrap框架中的css和js文件链接到创建的demo中)

5
编辑demo.html文件,添加对bootstrap框架中css和js的引用,内容如下,图片有注释说明,这样,我们就基本上建立了对bootstrap框架的基本使用架构

⑤ 如何用 bootstrap 创建一个网站

这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点。看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面,了解栅格系统,并且能够使用bootstrap导航、导航条和了解响应式设计的基础。这些全部都是使用twitter bootstrap所需要具备的知识。
首先需要说的是twitter bootstrap是非常优秀的一个前端开源框架,它为所有的组键都提供了详细的用例,让你能够轻易地通过复制黏贴而附加到你的设计中。查阅官方文档:twitter.github.com/bootstrap/index.html
基本的HTML模板
我们需要以一个基本的HTML模板,这样我们能够把所需要的bootstrap文件包含进来。下面就是我们twitter bootstrap项目的开头,复制这些代码到一个文件中并将其命名为index.html。
<!DOCTYPE html>
<head>
<title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
<style type='text/css'>
body {
background-color: #CCC;
}
</style>
</head>
<body>
</body>
</html>
这段代码中我们已经添加了一些CSS使页面的背景呈亮灰色,因为这样我们能够轻易地在我们的设计中看见不同的列,使它更加容易理解。

⑥ 有没有可以参考的用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做网站,不是有很多地方需要修改嘛,那么新写的css要怎么添加进去呢,head里面要怎么声明

head里面最先引用bootstrap的css:
<link href="bootstrap.main.css" rel="stylesheet" type="text/css" />
然后引用自定义的css文件

<link href="自定义.css" rel="stylesheet" type="text/css" />
在两个css文件中如果有相同命明的类,浏览器会优先使用后者,即“自定义.css”的样式。
为了稳妥起见,自定的样式最好加上“important”标记。
如:在bootstrap的css中有一个 .container的类,我们要改变他的宽度。这时在自动以的css文件中定义 .container {width:1000px !important;}
原理就是这样,你在做的过程中可以多摸索。希望可以帮到你。

⑨ 有人使用过bootstrap的表单生成器么求助

首先,网络一下bootstrap,打开并找到它为我们提供的表单构造器

看见右边写的大字了吗?使用鼠标将组件拖拽到表单区域即可。

仅仅将组件拖到表单区域可不行哦!这还不是我们需要的东西。左键单击已拖拽过来的组件,你会看到弹出的编辑框。更改完毕后点击“SAVE”,来看看效果吧。

这里有许多组件,可以让你制作出一张完整的表单。另外,bootstrap的表单属性会帮你自动布局,让组件乖乖的到合适的位置。

阅读全文

与bootstrap网站生成器相关的资料

热点内容
网络中常用的传输介质 浏览:518
文件如何使用 浏览:322
同步推密码找回 浏览:865
乐高怎么才能用电脑编程序 浏览:65
本机qq文件为什么找不到 浏览:264
安卓qq空间免升级 浏览:490
linux如何删除模块驱动程序 浏览:193
at89c51c程序 浏览:329
怎么创建word大纲文件 浏览:622
袅袅朗诵文件生成器 浏览:626
1054件文件是多少gb 浏览:371
高州禁养区内能养猪多少头的文件 浏览:927
win8ico文件 浏览:949
仁和数控怎么编程 浏览:381
项目文件夹图片 浏览:87
怎么在东芝电视安装app 浏览:954
plc显示数字怎么编程 浏览:439
如何辨别假网站 浏览:711
宽带用别人的账号密码 浏览:556
新app如何占有市场 浏览:42

友情链接