Bootstrap学习笔记 01 - 开始

最新推荐文章于 2022-11-02 22:57:28 发布

Cynhard85

最新推荐文章于 2022-11-02 22:57:28 发布

阅读量450

点赞数 1

分类专栏： Bootstrap 文章标签： bootstrap 学习笔记

本文链接：https://blog.csdn.net/u011304970/article/details/78399379

版权

Bootstrap 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

获取 Bootstrap

通过 bower 获取：

bower install bootstrap

如果用到 jQuery，则可以通过 npm 下载：

npm install --save jquery

也可以通过CDN方式引入 Bootstrap：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

第一个页面

<!-- 文档类型，Bootstrap 要求使用 HTML5 doctype -->
<!DOCTYPE html>
<html>
    <head>
        <!-- 使用 utf-8 字符集 -->
        <meta charset="utf-8" />
        <!-- 
            引入 Bootstrap 
            也可以通过CDN 方式引入 
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
        -->
        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css" />
        <!-- 
            viewport 指定渲染和缩放的方式
            width=device-width 根据不同设备屏幕的宽度设置页面的宽度
            initial-scale=1 设置初始缩放级别，1表示不缩放
         -->
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Hello World!</title>
    </head>

    <!-- 
        Bootstrap 包含两种容器，用以指定整个页面内容的样式 
        .container 为 fixed-width 容器
        .container-fluid 为 full width 容器，即宽度占满整个屏幕
    -->
    <div class="container">
        <h1>Hello World!</h1>
        <p>
            This is my first Bootstrap web! How does it look like?
        </p>
    </div>
</html>