bootstrap的安装方法:1、在Bootstrap官网下载Bootstrap文件,然后使用和来引用;2、通过Bower进行安装;3、通过npm进行安装;4、通过Composer进行安装即可。</p></blockquote> <p><img src="https://img.php.cn/upload/article/000/000/020/6006310e70677175.jpg" alt="bootstrap 怎么安装" ></p> <p>本教程操作环境:windows7系统,bootstrap3.3.7版本,Dell G3电脑。</p> <p>相关教程推荐:《<a href="https://www.php.cn/course/list/15.html" target="_blank" textvalue="bootstrap教程">bootstrap教程</a>》</p> <p>Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活。它基于HTML、CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件,用起来简单,粗暴。</p> <p><strong>Bootstrap 怎么安装?</strong></p> <p>1、在Bootstrap官网下载Bootstrap文件,然后使用<link>和<script>来引用</p> <p>登录Bootstrap官网</p> <p><img src="https://img.php.cn/upload/image/457/964/393/1611018405601350.png" title="1611018405601350.png" alt="6973989898ae0fb9fab67a914473d44.png"></p> <p>下载Bootstrap</p> <p><img src="https://img.php.cn/upload/image/162/384/996/1611018410124380.png" title="1611018410124380.png" alt="f49ba378f6384557d53b05147604cbf.png"></p> <p>Download Bootstrap:下载预编译和压缩版Bootstrap(不含文档和源码)。</p> <p>Download code:Bootstrap源码,如官网介绍,需要编译Less文件 和一些安装。</p> <p>刚接触Bootstrap的话建议下载第一个,下载下来直接用。</p> <p>文件结构</p> <p>下载下来的文件是压缩包,我们解压之后可以看到文件的结构。</p> <p><img src="https://img.php.cn/upload/image/477/626/464/1611018330648245.png" title="1611018330648245.png" alt="ba785cb841f3581b81aa135b54db04b.png"></p> <p>html使用Bootstrap</p> <p>html使用Bootstrap需要引用jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件,引用这几个文件可以让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。</p> <p>方式一:html与Bootstrap文件夹放在一起</p> <p>我们前面已经下载了预编辑的Bootstrap解压出来得到了Bootstrap文件夹,只要把html与Bootstrap文件夹放在一起,然后用相对路径引用jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件即可。</p> <p>方式二:html引用CDN中的jquery.js、bootstrap.min.js 和 bootstrap.min.css</p> <p>很多CDN服务已经上传有这几个文件了,直接调用就好。</p> <p>例如:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在线尝试 Bootstrap 实例</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"> Hello, world!