一:什么是Bootstrap?

Bootstrap是目前留下的前端框架之一,具备已下特点:

  1. 基于HTML、CSS、JavaScript开发的;
  2. 样式展现方面定义了大量全局样式、列表、按钮等样式组件;
  3. 特效方面实现了轮播、菜单等常用的js控件;
  4. 样式采用less编写,js调用了jquery库;
  5. 来自Twitter,现在委托保管再github上。

Bootstrap适用于网站的开发,不适用于管理系统(例如ERP)开发,它提供的css组件比较多,js控件比较少,因此可以称bootstrap是一套css框架。

二:下载:

官网地址:

http://www.bootcss.com/

Bootstrap3下载连接:

https://v3.bootcss.com/getting-started/

三:基本模板,入门:

<!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="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
  <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
   <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
  <h1>你好,世界!</h1>

  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
 </body>
</html>

文件版本:

!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="external nofollow" rel="stylesheet">
<link href="./bootstrap-3.3.7-dist/css/bootstrap-theme.css" rel="external nofollow" 
	rel="stylesheet">
<title>Insert title here</title>
</head>
<body>

</body>
<script type="text/javascript" src="./jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
	src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>

注:之上所有引用的js都是由官方提供,我们自己可以用自己下载好的本地文件添加进去即可使用!

以上所述是小编给大家介绍的Bootstrap入门学习详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对Devmax网站的支持!

详解Bootstrap 学习(一)入门的更多相关文章

  1. JSP开发入门(五)--JSP其他相关资源

    JSP其他相关资源:ServletsandJavaServerPages(JSP)1.0:ATutorialhttp://www.apl.jhu.edu/~hall/java/Servlet-Tutorial/JavaServerPagesTM:ADeveloper'sPerspectivehttp://developer.java.sun.com/developer/technicalArtic

  2.  typeScript入门基础介绍

    这篇文章主要介绍了 typeScript入门基础,TypeScript 是由微软开发的开源、跨平台的编程语言,是 javaScript 的超集,最终被编译为 javaScript代码。常常被简称为TS支持JS、ES语法,下文将继续其他基础介绍,需要的朋友可以参考一下

  3. Reactive Programming入门概念详解

    这篇文章主要为大家介绍了Reactive Programming入门概念详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  4. JSP入门教程(1)

    现在Sun公司并不会因你使用JSP向你收费,况且用于Solaris、Linux以及Windows系统的组件都很容易获得。Web服务器自动将通过JSP生成的Java代码片段转换成Java片段。JSP也可自动控制许多功能,如过去用Perl脚本编写功能程序或像ASP这样的服务器专用API。JSP基本语法讲完安装问题后,现在进入来讨论JSP语法。共有五种JSP指令和脚本元素。在更新的JSP1.1规范出台后,就有了与XML兼容的版本。“Taglib”指令不在讨论之列,但是在用JSP1.1创建自定义标记可以使用它。

  5. JSP开发入门(一)--安装好你的机器来使用JSP

    JSP开发入门(一)----安装好你的机器来使用JSP你将会需要Java2软件开发工具,它原来的名称是Java发展工具以及JavaServer网站发展工具,Tomcat,或是其它支持JSP的网络服务器。Sun免费提供JSDK与JSWDK来供Windows,Solaris,以及Linux平台使用。下载与安装你需要的组件目前发布的1.2.2-001,JSDK可下载的版本是以可安装的压缩形式。下载的文件大约是20MB,可提供完整的Java发展环境,让你能建立利用标准API为核心的Java解决之道。然而,你的网络

  6. JavaScript web网页入门级开发详解

    Web框架正如前文所述, 在整个项目结构中处于一个承上启下的位置, 是整个项目的核心组件, 所以这次来聊聊Web框架的一些普适性特性和如何快速的入门

  7. 初学者入门:细述PHP4的核心Zend

    在一些特殊测试环境下,Zend的执行速度比PHP3及ASP快了几倍到几百倍之多,这也意味着网站的后端CGI界面的统一者非PHP4Zend莫属了。以这种潜力发展下去,VBA的终结者非Zend莫属。而微软只全力对付Linux,没有注意到来自PHP/Zend的威胁。Web服务器发觉是PHP的要求,需要PHP引擎解析,于是将它送到PHP4的Zend引擎上。而目前在网络上的流行,也为Zend引擎作了最佳的见证。在Zend的四大产品中,这是目前唯一成熟的产品。届时,可能会有PHP大战Java的情形。

  8. Javascript 基础---Ajax入门必看

    下面小编就为大家带来一篇Javascript 基础---Ajax入门必看。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. Angularjs中的ui-bootstrap的使用教程

    这篇文章主要介绍了Angularjs中的ui-bootstrap的使用教程,非常不错,具有参考借鉴价值,需要的朋友可以参考下

  10. JDBCTM 指南:入门5 - ResultSet

    JavaSoft目前正在准备这本书。ResultSet.next方法用于移动到ResultSet中的下一行,使下一行成为当前行。在ResultSet对象或其父辈Statement对象关闭之前,光标一直保持有效。关于ResultSet中列的信息,可通过调用方法ResultSet.getMetaData得到。返回的ResultSetMetaData对象将给出其ResultSet对象各列的编号、类型和属性。getString的返回值将为JavaString对象。TIYITSMALLITITEGERBIGNTRE

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部