Bootstrap（一）——入门与环境搭建 20.3.18

最新推荐文章于 2023-10-09 18:18:36 发布

under_heart

最新推荐文章于 2023-10-09 18:18:36 发布

阅读量298

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/under_heart/article/details/104949713

版权

bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.Bootstrap引言

Bootstrap是基于HTML、CSS、JS开发的简介、直观、强悍的前端开发框架，提供了优雅的HTML和CSS规范，使得Web开发更加快捷。

2.Bootstrap环境搭建

从官网下载压缩包解压得到css、js、fonts三个文件。
创建Django项目，将三个文件复制到static文件夹中（需要自己创建）。
在templates文件夹中创建html文件，在<head>标签写入以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../static/css/bootstrap.min.css">

3.Bootstrap容器

<!--1.显示在页面上两端有留白-->
<div class="container" style="border: 1px red solid">aa</div>
<!--2.100%宽度，视图两端无留白-->
<div class="container-fluid" style="border: 1px blue solid">bb</div>

4.Bootstrap栅格系统

<div class="container-fluid" style="border: 2px blue solid">
<!--一行最多分为12行，多则另起一行-->
    <div class="row">
    <!--1.列分配-->
        <div class="col-sm-3" style="border: 1px red solid">a</div>
        <div class="col-sm-3" style="border: 1px red solid">a</div>
        <div class="col-sm-3" style="border: 1px red solid">a</div>
        <div class="col-sm-3" style="border: 1px red solid">a</div>
    </div>
    <hr>
    <div class="row">
    <!--2.列嵌套-->
        <div class="col-sm-1" style="border: 1px red solid">1</div>
        <div class="col-sm-10">
            <div class="col-sm-6" style="border: 1px red solid">b</div>
            <div class="col-sm-6" style="border: 1px red solid">b</div>
        </div>
        <div class="col-sm-1" style="border: 1px red solid">1</div>
    </div>
    <hr>
    <div class="row">
    <!--3.列偏移-->
        <div class="col-sm-4 col-lg-offset-4" style="border: 1px red solid">c</div>
    </div>
</div>

5. Bootstrap排版

<body>
<!-- 1.标题，和正常html显示有些许差别 -->
    <h1>主标题<small>副标题</small></h1>
    <h2>主标题<small>副标题</small></h2>
    <h3>主标题<small>副标题</small></h3>
    <h4>主标题<small>副标题</small></h4>
    <h5>主标题<small>副标题</small></h5>
    <h6>主标题<small>副标题</small></h6>
    <hr>
<!-- 2.高亮 -->
    这是<mark>高亮文字</mark>
    <hr>
<!-- 3.删除文本 -->
    <del>方式一：被删除文本</del>
    <s>方式二：被删除文本</s>
    <hr>
<!-- 4.带下划线文本 -->
    <ins>方式一：带下划线文本</ins>
    <u>方式二：带下划线文本</u>
    <hr>
<!-- 5.着重 -->
    这是<strong>着重显示</strong>
    <hr>
<!-- 6.斜体 -->
    这是<em>斜体</em>
    <hr>
<!-- 7.对齐方式 -->
    <p class="text-left">左对齐</p>
    <p class="text-center">居中对齐</p>
    <p class="text-right">右对齐</p>
    <p class="text-nowrap">不换行——不换行——不换行——不换行——不换行——不换行——不换行——不换行——不换行——不换行——不换行——不换行——不换行——不换行——不换行——不换行——不换行——不换行——不换行——不换行</p>
<!-- 8.大小写转换 -->
    <p class="text-lowercase">ABC</p>
    <p class="text-uppercase">abc</p>
    <P class="text-capitalize">this a html document</P>
</body>