详解Bootstrap 学习（一）入门

一：什么是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入门学习详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 如何使用bootstrap框架 bootstrap入门必看!

    如何使用bootstrap框架 bootstrap入门必看!

    前言: 前几天,本想做一个登陆界面,但自己写form表单必然很丑,所以想用下bootstarp框架,之前听别人说bootstrap很牛的样子.但我完全不会bootstrap... 下载&目录 看bootstrap官网,接着我下载了用于生产环境Bootstrap: 解压出来是这样的: 目录结构大概是这样的,前几天在官网有看到.下面这个目录结构你应该先了解下: bootstrap3 ├── css │├── bootstrap-theme.css //主题类型,生产上一般用不到 │├── boots

  • Bootstrap入门书籍之（五）导航条、分页导航

    Bootstrap入门书籍之（五）导航条、分页导航

    导航条 导航条(navbar)和上一节介绍的Bootstrap入门书籍之(四)菜单.按钮及导航.导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式. 基础导航条 实际上,导航条和导航在外观上的差别并不是那么的大,但

  • BootStrap入门教程(一)之可视化布局

    BootStrap入门教程(一)之可视化布局

    下载地址:http://v3.bootcss.com/getting-started/#download HTML模板: <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引

  • bootstrap table使用入门基本用法

    笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详细,故有了下列的文章.希望我的文章能给大家带来帮助. bootstrap-table作为常用的TABLE显示控件,会经常出现在各位的项目当中. 使用步骤如下: 第一步: 下载bootstrap-table需要使用的文件(包括Css and js文件) 官方网址   http://bootstrap-

  • Bootstrap零基础入门教程(三)

    Bootstrap零基础入门教程(三)

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 写到这里,这篇从零开始学Bootstrap(3)我想写以下几个内容: 1. 基于我对Bootstrap的理解,做一个小小的总结.

  • Bootstrap每天必学之简单入门

    Bootstrap每天必学之简单入门

    在上一篇文章中主要是简单的介绍了一下Bootstrap,这篇文章进一步了解相关内容,为之后的学习打下基础. 从Visual Studio 2013前不久的更新中看,微软是将Bootstrap3的新版本加入到了VS当中,所以学习Bootstrap3也没什么顾虑了. 一.下载BootStrap 官网的文件很详细简单,对于下载来说也有多种方式.对于我们开发者来说,估计最简单的方式就是直接下载编译和压缩后的CSS.JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件.打开解压包之后可以

  • 深入理解bootstrap框架之入门准备

    深入理解bootstrap框架之入门准备

    一.bootstrap框架简介 Bootstrap是最流行的前端开发框架. 什么是框架:开发过程的半成品. bootstrap具有以下重要特性: (1)完整的CSS样式插件 (2)丰富的预定义样式表 (3)基于jQuery的插件集 (4)灵活的栅格系统 以下将简单介绍对bootstrap可能用到的知识进行梳理. 二.新手入门 笔者使用版本是3.3.x 在bootstrap中文官网可以找到以下界面 本书采用预编译的版本进行学习 三. 文件结构 生产环境使用bootstrap.min.css和boo

  • Bootstrap入门书籍之（零）Bootstrap简介

    Bootstrap入门书籍之（零）Bootstrap简介

    什么是Bootstrap? Bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品.Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的. 基于html5.css3的bootstrap,具有下面这些诱人特性: (1)移动设备优先: (2)漂亮的设计: (3)友好的学习曲线: (4

  • 基于Bootstrap框架菜鸟入门教程(推荐)

    基于Bootstrap框架菜鸟入门教程(推荐)

    Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 一.栅格系统 栅格系统的工作原理: "行(row)"必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding). 通过"行(ro

  • 详解Bootstrap 学习（一）入门

    详解Bootstrap 学习（一）入门

    一:什么是Bootstrap? Bootstrap是目前留下的前端框架之一,具备已下特点: 基于HTML.CSS.JavaScript开发的: 样式展现方面定义了大量全局样式.列表.按钮等样式组件: 特效方面实现了轮播.菜单等常用的js控件: 样式采用less编写,js调用了jquery库: 来自Twitter,现在委托保管再github上. Bootstrap适用于网站的开发,不适用于管理系统(例如ERP)开发,它提供的css组件比较多,js控件比较少,因此可以称bootstrap是一套css

  • 详解Vue学习笔记入门篇之组件的内容分发(slot)

    详解Vue学习笔记入门篇之组件的内容分发(slot)

    介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ message }} </child-component> mess

  • 详解Bootstrap各式各样的按钮(推荐)

    详解Bootstrap各式各样的按钮(推荐)

    Bootstrap为我们提供了各式各样漂亮的按钮,我们无需自己给按钮写样式,直接使用它给我们提供的类样式,使用在我们的按钮上,非常的简单方便. 为尊重原创这里贴一下参考的教程:http://www.runoob.com/bootstrap/bootstrap-buttons.html.在我的很多笔记中,您可能会看到我贴的www.runoob.com相关的网址,在这里先声明这不是广告,我只是觉得每个人的劳动成果都应该被尊重.这个网站收集了很多的信息,供我学习,我非常的感激,借鉴于这些很好的教程,我

  • 详解Bootstrap网格垂直和水平对齐方式

    详解Bootstrap网格垂直和水平对齐方式

    目录 1.Bootstrap网格布局 2.垂直对齐 2.1 row标签中设置垂直对齐 2.2 col标签中设置垂直对齐 3.水平对齐 3.1 row标签中设置垂直对齐 1.Bootstrap网格布局 上一节我们介绍了Bootstrap中的网格,网格在网页布局中是一个重点和难点,布局是网页设计的起点和基础,一定要花功夫弄懂,最起码把我写的教程介绍的内容弄懂,因为我写的都是最常用的和最基础的.当然对于一个有一定基础的网页设计师,这些内容相信一看就懂,今天我们进一步学习网格布局. 本节内容涉及到通用类

  • 详解sed -i 命令入门教程

    目录 一.简介 1.sed介绍 2.sed工作原理 3.正则表达式概念 4.正则表达式的匹配过程 二.基本正则表达式 1. 符号"." 2. 符号"*" 3. 符号"[]" 4. 符号"^" 5. 符号"$" 6. 符号"\" 7. 符号"{}" 8. 符号"\<"和"\>" 三.扩展正则表达式 1. 符号"

  • 详解bootstrap用dropdown-menu实现上下文菜单

    详解bootstrap用dropdown-menu实现上下文菜单 写在前面: 所谓上下文菜单,它与一般菜单的区别在于: 通过右键触发显示在鼠标右键点击处 鼠标在别处点击后,该菜单消失 实现方法: 在html中定义一个普通的没有触发条件的dropdown-menu,然后写这个menu的父容器的监听即可实现. 代码: <div id="settingInGraph"> <ul class="dropdown-menu" role="menu&

  • 详解BootStrap中Affix控件的使用及保持布局的美观的方法

    Affix是BootStrap中的一个很有用的控件,他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域.一开始的时候,导航在页面中是普通的流式布局,占有文档中固定的位置,当页面滚动的时候,导航就自动变成了固定布局(fixed),始终处于用户的视区,下面来说说他的用法.首先来看看他的实现原理.它是通过实时修改页面元素的class属性来实现的 开始的时候应用affix的元素的class中会自动添加affxi-top属性 当滚动条滚动以至于导航快要到页面顶部的时候这时候在元素的class

  • 详解angularjs 学习之 scope作用域

    简介 Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个存储应用数据模型的对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 作用域是Web应用的控制器和视图之间的粘结剂: 控制器 --> 作用域 --> 视图(DOM) 指令 --> 作用域 --> 视图(DOM) 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: <div ng-controller=

  • 详解Python学习之安装pandas

    详解Python学习之安装pandas

    一.python pip的安装与使用 1.pip 是 Python 包管理工具,该工具提供了对Python 包的查找.下载.安装.卸载的功能. 目前如果你在 python.org 下载最新版本的安装包,则是已经自带了该工具. Python 2.7.9 + 或 Python 3.4+ 以上版本都自带 pip 工具. pip 官网:https://pypi.org/project/pip/ 你可以通过以下命令来判断是否已安装: pip --version 2.如果你还未安装,则可以使用以下方法来安装

  • 详解Bootstrap插件

    在前面 布局组件 章节中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的 JavaScript 开发人员,您也可以着手学习 Bootstrap 的 JavaScript 插件.利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况被触发. 站点引用 Bootstrap 插件的方式有两种: 单独引用:使用 Bootstrap 的个别的 *.j

随机推荐