bootstrap 建个几个页面的网站 - CSDN
精华内容
参与话题
  • 模仿人家网站做的bootstrap几个页面 兼容IE8+ 在IE8上测试 网站要放置在服务器上
  • 5分钟打造bootstrap网页

    千次阅读 2015-02-17 10:17:20
    1、这里只用了bootstrapbootstrap-combined.min.css,只是非常简单的一例子; 2、bootstrap-combined.min.css的引入,这里是用了cdn,当然,你也可以下载整个bootstrap到本地然后引入; 3、bootstrap-combined....

    如果你够快,其实不需要5分钟,也需1分钟就够了。


    首先,创建一个空白的index.html文件,拷贝以下代码:

    <!DOCTYPE html>
    <head>
    <title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
    <link
    	href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css"
    	rel="stylesheet">
    <style type='text/css'>
    body {
    	background-color: #CCC;
    }
    
    #content {
    	background-color: #FFF;
    	border-radius: 5px;
    }
    
    #content .main {
    	padding: 20px;
    }
    
    #content .sidebar {
    	padding: 10px;
    }
    
    #content p {
    	line-height: 30px;
    }
    </style>
    
    </head>
    <body>
    	<div class='container'>
    
    		<h1>TWITTER BOOTSTRAP TUTORIAL</h1>
    
    		<div class='navbar navbar-inverse'>
    			<!--<div class='nav-collapse' style="height: auto;">-->
    			<div class='navbar-inner nav-collapse' style="height: auto;">
    				<ul class="nav">
    					<li class="active"><a href="#">Home</a></li>
    					<li><a href="#">Page One</a></li>
    					<li><a href="#">Page Two</a></li>
    				</ul>
    			</div>
    		</div>
    
    		<div id='content' class='row-fluid'>
    			<div class='span9 main'>
    				<h2>Main Content Section</h2>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
    					diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
    					erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
    					tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
    					consequat. Duis autem vel eum iriure dolor in hendrerit in
    					vulputate velit esse molestie consequat, vel illum dolore eu
    					feugiat nulla facilisis at vero eros et accumsan et iusto odio
    					dignissim qui blandit praesent luptatum zzril delenit augue duis
    					dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
    					eleifend option congue nihil imperdiet doming id quod mazim
    					placerat facer possim assum.</p>
    				<p>Typi non habent claritatem insitam; est usus legentis in iis
    					qui facit eorum claritatem. Investigationes demonstraverunt
    					lectores legere me lius quod ii legunt saepius. Claritas est etiam
    					processus dynamicus, qui sequitur mutationem consuetudium lectorum.
    					Mirum est notare quam littera gothica, quam nunc putamus parum
    					claram, anteposuerit litterarum formas humanitatis per seacula
    					quarta decima et quinta decima. Eodem modo typi, qui nunc nobis
    					videntur parum clari, fiant sollemnes in futurum.</p>
    			</div>
    			<div class='span3 sidebar'>
    				<h2>Sidebar</h2>
    				<ul class="nav nav-tabs nav-stacked">
    					<li><a href='#'>Another Link 1</a></li>
    					<li><a href='#'>Another Link 2</a></li>
    					<li><a href='#'>Another Link 3</a></li>
    				</ul>
    			</div>
    		</div>
    
    	</div>
    </body>
    </html>
    


    然后分别用Google Chrome浏览器(我的版本是40.0.2214.94 m)、firefox(35.0.1)、360(7.1.1.529)、ie8(8.0.0.6001)打开,除了ie8,其他三个浏览器基本都是当前最新版了(360当前最新是7.1.1.556),如下图。可以看出了,除了ie8,其他3个浏览器都没啥问题,样式很漂亮,当你放大或缩小时会自动响应大小。IE8当然是不行的,太老了,我特意用它也看看是什么效果。



    将firefox缩小,如下图:



    几点注意事项:

    1、这里只用了bootstrap的bootstrap-combined.min.css,只是非常简单的一个例子;

    2、bootstrap-combined.min.css的引入,这里是用了cdn,当然,你也可以下载整个bootstrap到本地然后引入;

    3、bootstrap-combined.min.css的引入必须在你页面自定义的<style type='text/css'>前面,如果放在后面样式会被覆盖;

    4、cdn引入的时候,前面必须是http://netdna.这样有http的。我从原地址直接查看源代码,只有//netdna(不知是否浏览器问题),没有了http我本地试了是不行的;

    5、TAB标题“HOME”的样式应该是class='navbar-inner nav-collapse',然后有篇中文翻译文章却写成class='nav-collapse',是错误的;

    6、现在最新是3.3.2版本,这个例子还用的是2.3版本,请注意。


    该网页的原地址:http://www.revillwebdesign.com/demos/bootstraptutorial/#

    源代码网址:https://github.com/RevillWeb/bootstrap-tutorial

    搭建该网页的说明原文地址:http://www.revillweb.com/tutorials/bootstrap-tutorial/

    参考的中文翻译的地址:http://www.w3cplus.com/css/twitter-bootstrap-tutorial.html


    2015.2.17



    展开全文
  • Bootstrap作为针对响应式设计和移动优先的前端web开发,是当下最流行的设计框架之一。使用 免费的Bootstrap ...为方便大家学习,今天为大家分享的这些UI工具包主要从以下几个方面分类: Bootstrap HTML UI工具包 ...

    Bootstrap作为针对响应式设计和移动优先的前端web开发,是当下最流行的设计框架之一。使用 免费的Bootstrap UI工具包让原型设计和网页设计变得更加简单。

     

    摹客的小伙伴们为大家整理了一批使用Bootstrap构建的免费UI工具包,你可以将其用作设计的起点。为方便大家学习,今天为大家分享的这些UI工具包主要从以下几个方面分类:

     

    • Bootstrap HTML UI工具包
    • Bootstrap XD UI工具包
    • Bootstrap 材料设计及模板

     

    免费Bootstrap HTML UI工具包

     

    1. Get Shit Done Kit

     

    Bootstrap UI kit- Get Shit Done Kit

     

    免费下载

     

    这款免费的Bootstrap 3 UI工具包提供响应式设计和易于使用的设计元素。该工具包包含22个组件,3个自定义插件和1个示例页面。并且,它提供了所有必要的CSS资源,只需在HTML模板中包含“css/ get-shit-done.css”即可使用。

     

    2. Shards Dashboard Lite React

     

    Bootstrap UI kit- Shards

     

    免费下载

     

    Shards是一个基于Bootstrap4的现代设计系统,包含10个额外的自定义组件和2个预构建的登陆页面。 整个文件非常轻巧,其样式表压缩后仅为13KB。默认情况下,Shards支持Material和FontAwesome包。

     

    3. Bootstrap3 Vector UI Kit

     

    Bootstrap3 Vector UI Kit

     

    免费下载

     

    此UI工具包包含矢量格式的所有Twitter Bootstrap 3 UI控件,包含所有经过切片,样式化的基本UI元素和HTML编码。该工具包支持三种不同格式的下载:PDF,Sketch和AI。

     

    4. Bootstrap 4 UI kit

     

    Bootstrap 4 UI kit

     

    免费下载

     

    Bootstrap-ecommerce ui kit是一个开源工具包工具包, 其HTML,CSS和JS技术允许将这个工具包适用于电子商务网站,市场营销和产品预订网站的开发。现成的插件方便快速制作原型。 另外,该工具包还包括电子商务模板入门工具包。

     

    5. Stream

     

    Bootstrap UI kit- Stream

     

    免费下载

     

    Stream UI Kit是一款开源Bootstrap4 UI Kit,包含5个漂亮的完整页面,包括20多个可重复使用和可自定义的UI模块,例如色彩,排版,字体,按钮等等。

     

    免费Bootstrap XD UI工具包

     

    1. Adobe XD Bootstrap 4 UI Kit

     

    Adobe XD Bootstrap 4 UI Kit

     

    免费下载

     

    这是一款基于流行的前端框架Bootstrap 4的免费Adobe XD UI工具包,包括所有组件例如表格、图片、按钮、字体、颜色等等。使用此UI工具包可轻松设计基于引导程序的站点。

     

    2. Adobe XD Bootstrap 4 Grid Template

     

    Adobe XD Bootstrap 4 Grid Template

     

    免费下载

     

    目前XD还不具有创建布局网格的功能。有了这款工具包,你也可以轻松创建网格。它提供4种不同屏幕尺寸的网格。

     

    3. Takeme

     

    Bootstrap UI kit- takeme

     

    免费下载

     

    这是一款主打旅游题材的Bootstrap UI工具包,系统的组件和建站元素有助于快速打造旅游类网站并提升工作流程。该工具包支持三种不同格式的下载:PS,Sketch和XD。

     

    4. Universal Web UI Kit

     

    Universal Web UI Kit

     

    免费下载

     

    这款时尚简约的工具包包括523 UI组件,用于创建现代化的在线商店,博客,杂志或在线媒体。贴心的设计师提供了2种颜色的排版系统,你可以根据需要更改文本样式,颜色,添加或替换照片和图形或自定义模板。

     

    5. Malta Financial IOS app UI Kit

     

    Malta Financial IOS app UI Kit

     

    免费下载

     

    Malta是一个非常优秀的UI工具包,包含20多个iPhone XS尺寸的金融应用程序屏幕。所有组件都可完全自定义。工具包中使用了免费的Google字体和多种免费图标。适用于Sketch,Photoshop,XD和Figma。

     

    PS:以上5款免费Bootstrap XD UI工具包均可借助摹客iDoc进行智能标注、一键切图,将设计稿快速交付给前端工程师,实现网页快速开发~

     

    iDoc

     

    Bootstrap材料设计

     

    什么是Bootstrap材料设计呢?

     

    Bootstrap的MaterialDesign是一个基于Bootstrap的开源工具包,用于使用HTML,CSS和JS开发MaterialDesign应用程序。 使用我们的Sass变量和mixins,响应式网格系统,广泛的预构建组件以及基于jQuery构建的强大插件,快速构建你的想法或构建整个应用程序。

     

    优秀Bootstrap材料设计案例

     

    1.Bootstrap 4 & Material Design -作品集模板

     

    Bootstrap 4 & Material Design -作品集模板

     

    免费下载

     

    此模板使用MDBootstrap构建,是一个功能强大且免费的UI工具包,包含400多个素材UI元素,600多个素材图标,74个CSS动画,SASS文件,模板,教程等等。完全响应式的设计使它可以在各种尺寸的屏幕上完面呈现。

     

    2. MaterialKit -材料设计模板

     

    MaterialKit -材料设计模板

     

    免费下载

     

    Material Kit是一款免费的Bootstrap4 UI工具包,采用全新设计,灵感源自Google的材料设计。包含60个组件,3个示例页面和2个完全可自定义的插件。

     

    3. React Admin Dashboard Template – 仪表盘模板

     

    React Admin Dashboard Template – 仪表盘模板

     

    免费下载

     

    这款免费的响应式仪表盘模板包含众多不同风格的仪表板和数据演示组件。采用最新的Bootstrap4,React JS和Material Design构建,可免费用于个人和商业用途。

     

    此模板使用MDBootstrap构建,包含500多个素材UI元素,600多个素材图标,74个CSS动画,SASS文件,模板,教程等。

     

    4. Landing Page Template – 登录页模板

     

    Landing Page Template – 登录页模板

     

    免费下载

     

    这款着陆页模板提供了完整或半页的简介,CTA按钮,表格和许多其他重要组件。包含400多个素材UI元素,600多个素材图标,74个CSS动画,SASS文件,模板,教程等。

     

    5. Material Admin –后台管理模板

     

    Material Admin –后台管理模

     

    免费下载

     

    Material Admin是完全使用Bootstrap框架构建的免费管理模板,提供按钮、图标、表格、排版等基础组件。

     

    总结:

    以上就是摹客为大家分享的15款优秀的免费Bootstrap UI工具包。在Bootstrap 框架的基础上,构建美观且响应迅速的网页已经非常流行且便捷了。希望你能从这些免费的Bootstrap模板中获取灵感,并在下一个设计项目中使用起来。

     

    相关阅读:

    想让网站销量爆涨?你离成功只差一个出色的购物车设计

    灵感专题 — 2019年优秀UI动画设计作品欣赏#5月

    赶紧收藏!41个Web UI工具包资源免费及付费下载

    2019年设计师必看,UI加载动画完全解读
    ​​​​

    展开全文
  • 简单的几个拖放操作就能做出漂亮的 Twitter Bootstrap 网站?是的,LayoutIt 是一个 Twitter Bootstrap 界面生成器,能够帮助你快速制作出网站和界面模型,同时能够下载生成的网站代码。 功能强大,并且可以下载...

      简单的几个拖放操作就能做出漂亮的 Twitter Bootstrap 网站?是的,LayoutIt 是一个 Twitter Bootstrap 界面生成器,能够帮助你快速制作出网站和界面模型,同时能够下载生成的网站代码。

    功能强大,并且可以下载生成的网站代码。

    http://www.cnblogs.com/lhb25/archive/2013/05/02/drag-drop-bootstrap-interface-builder.html#2868448

    展开全文
  • 如何使用npm引入bootstrap

    千次阅读 2019-11-30 16:56:21
    天自己打算做一项目,把一些前端方面的知识归总一下,顺便学一下thinkphp。项目途中,遇到了很多的问题。我本来一开始打算用element-UI,不打算使用bootstrap,但是最终还是放弃了element-UI。原因无他,用惯了...

    喜欢的小伙伴点个赞哦。
    这几天自己打算做一个项目,把一些前端方面的知识归总一下,顺便学一下thinkphp。项目途中,遇到了很多的问题。我本来一开始打算用element-UI,不打算使用bootstrap,但是最终还是放弃了element-UI。原因无他,用惯了bootstrap,就是觉得element-UI太难用。不过,作为一个长期项目,以后也有肯能会用其他的UI组件替代bootstrap,毕竟前端还是要多多的尝试新东西。
    好了,废话也说完了,我们就正式来讲讲正题吧。

    1. 第一步,当然是使用npm来安装bootstrap
      npm install bootstrap@4
      这里@4的作用是指定安装的版本是4.x版本, 不写的话,就默认安装最新版本,我还是喜欢写上的。
    2. 通过前面的步骤,我们已经安装了bootstrap,接下来我们就需要安装jquery,因为bootstrap是依赖于jquery的。我们同样使用npm安装jquery
      npm install jquery
    3. 好,接下来我们就要在文件中引入jquerybootstrap了,我们先建一个文件,就叫init.js吧。
      import $ from 'jquery'
      import 'bootstrap'
    4. 接下来,我们还需要把jquery挂到window对象上。
      window.jQuery=$
      jQuery=$
      window.$=window.jQuery
    5. 未完待续...
    展开全文
  • Bootstrap嵌入jqGrid,使你的table牛逼起来
  • 最近使用Orchard和Bootstrap为哥的 ALinq 做了网站,总得来说,很不错。比自己一行一行地写代码,有效率多了,而且页面也干净利落,当然,比起专业的网站的,还是有不少距离。选择Orchard,是因为从年前,就...
  • 最近使用Orchard和Bootstrap为哥的 ALinq 做了网站,总得来说,很不错。比自己一行一行地写代码,有效率多了,而且页面也干净利落,当然,比起专业的网站的,还是有不少距离。选择Orchard,是因为从年前,就...
  • BootStrap的认识

    2020-03-05 23:40:19
    前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。 框架:一半成品软件,开发人员可以在框架基础上,在...
  • Nodejs/Jquery/Bootstrap搭建简单的web服务Jquery前端BootstrapNodejs Contents 整体思路跨域访问问题Jquery.post()回调函数不执行问题总结 最近想给毕设加入一前端界面来调用后台的一些功能,这样展示性更好。...
  • springboot、mybatis、thymeleaf、bootstrap整合框架
  • 亲戚介绍工作的事没下文了,前天前端强化了一下,现在仍然转回来学习EF+MVC+Bootstrap。 弄了个项目,但搞了个页面就无从下手了,不知要怎么规划。刚好在网上碰到一套源码,...
  • 后端分页:每次只查询当前页面加载所需要的那条数据 下载bootstrap 下载bootstrap table jquery谁都有,不说了 项目结构:TestController命名打错了,请无视。。 一,前端分页 前端分页比较简单,只需要把...
  • Bootstrap总结

    2016-03-31 19:34:15
    Bootstrap主要应用总结  文件说明:  Bootstrap.less文件:设置全局的排版和链接显示风格,但是其中去掉Body的margin属性,使用@baseFontFamily,@baseFontStyle,@linkColor等变量来控制基本排版  布局...
  • 最近用到一需要做树形结构的需求,在网上找了一些,最后用了bootstraptreeTable来实现,效果如下: 1 ,去官网上下载gtreeTable:https://github.com/gilek/bootstrap-gtreetable#configuration,这里是一...
  • 其实在之前好几个Django项目中已经尝试使用过了Bootstrap,而且都留有学习记录,我已经大概有了一个大的框架,那么本文就从头再走一遍流程,其实主要细节还是Bootstrap的常用的语法使用。除了基本流程,本文基于BBS+...
  • 文章目录0 系统简介1 Flask部分1.1 wsgi.py1.2 config.py + models.py1.3 router.py1.4 jinjia2传值至前端1.5 Ajax1.5.1 前端向后端传递数据1.5.2 后端向前端传递响应2 bootstrap部分2.1 下载2.2 使用2.2.1 垂直侧边...
  • Vue2学习 项目中在使用bootstrapTable的时候,在table里面会有操作结合vue使用过程中点击相应的操作不会起作用 解决办法 1、把事件绑定到父元素上即可,但要判断什么样的需要点击,用...
  • 使用Jekyll-bootstrap快速搭建博客

    千次阅读 2014-12-24 22:33:39
    Jekyll QuickStart 1.创建GitHub博客 (1)创建一新的仓库 ...进入你的...(2)安装Jekyll-Bootstrap 打开终端,进入你想要存放博客的文件夹,输入以下命令: git clone https://github.com/plus
  • bootstrap jquery table 使用中遇到的问题

    千次阅读 2017-11-15 10:14:49
    做一大数据的项目,web页面数据展示用的ACE,所以有些页面想用到Jquery table来做, 整个项目用Python+Django+ACE来做web前后端 模板本身的演示效果如下,个人感觉还是相当美观,而且排序和导出功能也非常清晰:...
1 2 3 4 5 ... 20
收藏数 3,876
精华内容 1,550
热门标签
关键字:

bootstrap 建个几个页面的网站