第一章：认识bootstrap

第一章

1. bootstrap框架 基于css html js Jquery的框架
2. 特点：简洁、灵活、移动优先，支持大部分浏览器
3. 响应式设计
4. 作用于：表格样式 、JS特效、导航
5. 如何引入bootstrap
   1. 下载所需文档，解压之后，放入项目目录中
   2. head中 使用meta viewport 适配移动版设备
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
   3. head中 使用link标签 引入bootstrap.css文件
      <link rel="stylesheet" type="text/css" href="css/css/bootstrap.min.css"/>
   4. 在body 后边 使用script标签 引入 jquery.js
      <script type="text/javascript" src="js/jquery-3.6.0.js" ><"/script>
   5. 在上边script标签底部引入bootstrap.bundle.js
      <script src="js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"><"/script>
   6. 调用相关的class或者js

代码实现

<div class="container ">
            <h2> 
            第一章
        </h2>
        <ol >
            <li>bootstrap框架 基于css html js Jquery的框架</li>
            <li>特点：简洁、灵活、移动优先，支持大部分浏览器</li>
            <li>响应式设计</li>
            <li>作用于：表格样式 、JS特效、导航</li>
            <li><strong>如何引入bootstrap</strong>
            <ol >
                <li>下载所需文档，解压之后，放入项目目录中
                
                </li>
                <li>head中 使用meta viewport 适配移动版设备
                    <br /><code>
                    &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
                </code>
                </li>
                <li>head中 使用link标签 引入bootstrap.css文件
                <br /><code>
                    &lt;link rel="stylesheet" type="text/css" href="css/css/bootstrap.min.css"/>
                </code></li>
                <li>在body 后边 使用script标签 引入 jquery.js
                <br /><code>&lt;script type="text/javascript" src="js/jquery-3.6.0.js" >&lt;"/script></code>
                </li>
                <li>在上边script标签底部引入bootstrap.bundle.js
                <br />
                <code>
                    &lt;script src="js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8">&lt;"/script>
                </code>
                </li>
                <li>调用相关的class或者js</li>
            </ol></li>
        </ol>
        </div>