3.1. Bootstrap样式及其应用

NH4NO3nice

已于 2022-08-20 10:48:54 修改

阅读量586

点赞数 2

分类专栏： # css样式 Django网页开发 # Bootstrap样式文章标签： bootstrap css 前端

于 2022-08-20 10:39:29 首次发布

本文链接：https://blog.csdn.net/NH4NO3nice/article/details/126436691

版权

Django网页开发同时被 3 个专栏收录

8 篇文章

订阅专栏

css样式

3 篇文章

订阅专栏

Bootstrap样式

1 篇文章

订阅专栏

文章目录

Bootstrap样式

Bootstrap样式

别人已集成好的CSS样式（显示效果更美观），使用的时候只需要在Bootstrap官网上找到想要的样式复制过来修改即可（这个过程中，需要掌握网页抓取，在网页中鼠标右击–>检查）。

使用前先再HTML文件中导入Bootstrap；
Bootstrap原始代码 + 自定义修改 --> 满足不同需求；

1. 下载Bootstrap

下载地址：https://v3.bootcss.com/

点击下载Bootstrap --> 下载Bootstrap

2. 安装Bootstrap

解压下载好的Bootstrap压缩包（其本质就是一些CSS文件）；
将压缩包放到app当中的static目录下的plugins(插件)文件当中；

在HTML模板中使用Bootstrap时，只需要引入static/plugins/bootstrap-3.4.1(注意自己的文件名)/css/bootstrap.css；

{% load static %}  <!-- 加载static目录，Django引入推荐写法 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>title</title>
  	<!-- 链接bootstrap文件夹下的css/bootstrap.css文件，bootstrap的所有样式都在这个文件里面，
  	语句中rel="stylesheet"固定的，表示链接的是一个CSS样式文件 -->
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">  
</head>

3. 使用bootstrap样式

安装并配置完成之后，就可以在HTML文件中用bootstrap的样式了，使用的时候找到对应的样式名（从官网上找）。

3.1 按钮

<body>
    <div></div>
    <input type="button" value="提交" />
    <input type="button" value="提交" class="btn btn-primary" />
    <input type="button" value="提交" class="btn btn-success" />
    <input type="button" value="提交" class="btn btn-danger" />
    <input type="button" value="提交" class="btn btn-danger btn-xs" />  <!-- btn-xs表示下按钮 -->
</body>

在这里插入图片描述

3.2 导航

打开官网 --> 组件 --> 导航

在这里插入图片描述

在导航目录下面就可以看到bootstrap提供的各式导航，例如，我相中了这个导航条，怎么运用呢？

在这里插入图片描述

在这个样式的下面有带样式的HTML源码，直接复制到HTML文件中的<body></body>中即可；

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

在这里插入图片描述

对于官网给的样式如何修改呢？

根据网页的检测找到想要修改的地方对应的HTML代码；
- 打开自己的网页；
- 右击鼠标 --> 点击检查 --> 可以看见自己网页的HTML源码；
- 点击源码框中的选择图标，就可以通过鼠标直接定位你想要修改的地方；
根据HTML代码中的嵌套关系，也可以自己定位到需要修改的地方；
如何修改？
- 如果是想要修改文字、增添组件、删减组件，直接在源码里面改就可以了；
- 如果是样式不喜欢，可以在下面添加自己的样式<style></style>，再将样式运用到对应标签，或者直接在标签上添加style=""；

3.3 栅格系统（用于页面布局）

在这里插入图片描述

将整行划分为12个区域，可以设置占多少个区域；

<div>
    <div class="col-xs-4" style="background-color: red">.col-md-4</div>
    <div class="col-xs-8" style="background-color: green">.col-md-8</div>
</div>

在这里插入图片描述

分类
- 响应式：根据屏幕宽度不同进行显示响应；
- 非响应式：无论页面大小，均是按指定各种划分，即手机、平板、电脑的页面显示相同；

列偏移

<div>
    <div class="col-sm-offset-2 col-xs-4" style="background-color: red">.col-md-4</div>  <!--将列向右偏移2格-->
</div>

注意：栅格本质上也是利用float来做的，所以需要清除浮动。导入Bootstrap之后，就不用在与浮动标签同级的最后手动添加<div style="clear: both"></div>了，直接在父级标签中的class中添加clearfix样式即可；
```
<div class="clearfix">
    <div class="col-xs-4" style="background-color: red">.col-md-4</div> 
</div>
```

3.4 布局container

container，会给div一个宽度，并且设置左右外边距为auto（即会使div居中）；

<div class="container">
    <div class="col-xs-4" style="background-color: red">.col-md-4</div>
    <div class="col-md-8" style="background-color: green">.col-md-8</div>
</div>

在这里插入图片描述

container-fluid，使div平铺，并设置一定边距；

<div class="container-fluid">
    <div class="col-xs-4" style="background-color: red">.col-md-4</div>
    <div class="col-md-8" style="background-color: green">.col-md-8</div>
</div>