bootstrap该怎么安装

angryTom

angryTom

发布时间:2019-07-20 13:41:14

|

4471人浏览过

|

来源于php中文网

原创

bootstrap该怎么安装

推荐教程:bootstrap教程

下载 Bootstrap

  您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本

  您会看到两个按钮:

b23.jpg

  ●Download Bootstrap:下载 Bootstrap。点击该按钮,您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。

  ●Download Source:下载源代码。点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。

  如果您使用的是未编译的源代码,您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件,Bootstrap 官方只支持 Recess,这是 Twitter 的基于 less.js 的 CSS 提示。

  为了更好的了解和更方便的使用,我们将在本教程中使用 Bootstrap 的预编译版本。

  由于文件是被编译过和压缩过的,在独立的功能开发中,您不必每次都包含这些独立的文件。

  本教程编写时,使用的是(Bootstrap 3)。

文件结构    

Bootstrap淘宝购物车结算代码
Bootstrap淘宝购物车结算代码

Bootstrap淘宝购物车结算代码是一款bootstrap布局的购物车结算页面设计代码。

下载

预编译的 Bootstrap

  当您下载了 Bootstrap 的已编译的版本,解压缩 ZIP 文件,您将看到下面的文件/目录结构:

b21.jpg

  如上图所示,可以看到已编译的 CSS 和 JS(bootstrap.*),以及已编译压缩的 CSS 和 JS(bootstrap.min.*)。同时也包含了 Glyphicons 的字体,这是一个可选的 Bootstrap 主题。

Bootstrap 源代码

  如果您下载了 Bootstrap 源代码,那么文件结构将如下所示:

b22.jpg

  less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

HTML 模板

  一个使用了 Bootstrap 的基本的 HTML 模板如下所示:

<!DOCTYPE html><html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>
 
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body></html>

  在这里,您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件,用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

通义千问
通义千问

阿里巴巴推出的全能AI助手

Claude
Claude

Anthropic发布的与ChatGPT竞争的聊天机器人

Cursor
Cursor

一个新的IDE,使用AI来帮助您重构、理解、调试和编写代码。

Hermes Agent
Hermes Agent

一位与您共同成长的Agent

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
搜狐简单AI文案写作与运营办公教程
搜狐简单AI文案写作与运营办公教程

本专题整理搜狐简单AI文案写作功能,覆盖营销文案、小红书笔记、公众号文章、短视频脚本、商品文案、活动文案和办公写作场景。

9

2026.07.15

搜狐简单AI绘图与图片生成提示词教程
搜狐简单AI绘图与图片生成提示词教程

本专题聚焦搜狐简单AI绘图和AI图片生成能力,整理头像、海报、插画、国风、写实、电商图等场景的提示词模板和出图技巧。

5

2026.07.15

搜狐简单AI官网入口与新手使用教程
搜狐简单AI官网入口与新手使用教程

本专题整理搜狐简单AI官网入口、网页版登录、新手使用流程、核心功能和常见问题,帮助用户快速了解AI绘图、AI文案、图片编辑和素材社区功能。

4

2026.07.15

万兴天幕AI图片生成与设计创作教程
万兴天幕AI图片生成与设计创作教程

本专题围绕万兴天幕文生图片、局部重绘和参考生图能力,整理AI绘图教程、设计提案玩法、图片修改技巧和视觉素材生成方法。

0

2026.07.15

万兴天幕AI视频生成教程与Prompt提示词
万兴天幕AI视频生成教程与Prompt提示词

本专题聚焦万兴天幕文生视频、图生视频、视频续写和AI特效功能,整理提示词写法、镜头语言模板、案例教程和视频生成效果优化方法。

7

2026.07.15

Vidu图生视频教程大全
Vidu图生视频教程大全

Vidu图生视频专题围绕上传图片生成动态视频展开,整理参考图选择、运动描述、镜头推进、人物表情、产品展示、照片动起来和生成失败排查方法,适合把海报、头像、产品图和插画转成短视频的用户。

6

2026.07.15

问小白AI写作与内容创作教程
问小白AI写作与内容创作教程

本专题详解问小白AI写作功能,涵盖文章生成、文案创作、论文辅助、报告整理及创意写作等内容生产技巧,助您高效产出优质内容。

5

2026.07.15

Vidu文生视频教程大全
Vidu文生视频教程大全

Vidu文生视频专题聚焦通过文字描述生成视频,覆盖场景设定、人物动作、镜头语言、画面风格、时长控制、运动效果和提示词优化方法,帮助用户用Vidu快速生成短视频、广告片段和创意素材。

2

2026.07.15

万兴天幕AI官网入口与新手使用教程
万兴天幕AI官网入口与新手使用教程

本专题整理万兴天幕AI官网入口、创作广场登录方式、APP下载、新手使用流程、核心功能和常见问题,帮助用户快速了解这款AI视频图片音乐生成工具。

0

2026.07.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 4.9万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 16万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 4.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号