Django学习笔记：Bootstrap框架基础_

作者：weixin_40725706 | 2024-06-16 04:34:15

踩

Bootstrap框架使用介绍

Bootstrap栅格布局

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口viewport尺寸的增加，系统会自动分为12列。一般地，针对现有的移动设备，如手机、平板电脑以及桌面计算机的显示器等，Bootstrap提供了4中分辨率规模，分别是col-xs（小屏幕手机）、col-sm（平板）、col-md（普通桌面计算机的显示器）、col-lg（大型桌面计算机的显示器）。例如，下面的代码演示了如何在桌面显示器和手机上分别以两种不同的适配形态进行展示
```

<body>
  <div class='alert alert-success col-md-6 col-ms-12' role='alert'>
    Python Web实战
  </div>
  <div class='alert alert-info col-md-6 col-ms-12' role='alert'>
    Python Web实战
  </div>
</body>

1
2
3
4
5
6
7
8
9
10
```
上述代码代码调用了两个提示框，通过添加类col-md-6表示在显示器下该div占6格，因此两个提示框各占6格，因此两个提示框各占6格正好一行。

如果将计算机显示器窗口缩小或者采用手机浏览，此时类样式col-xs-12起作用，使得该div占整个一行，最终两个提示框会分行显示。

采用Bootstrap的栅格系统可以方便地同时开发出适合桌面计算机显示器和移动设备的网站，实现一套代码多种设备适配。另外，Bootstrap的栅格系统使得网页的布局更加简单，只需要将各个组件堆叠到对应的div中，然后通过栅格系统实现每个div的位置控制。
Bootstrap组件使用介绍

本节通过介绍Bootstrap的导航条组件来熟悉Bootstrap前端框架并且帮助读者掌握调用Bootstrap组件的基本方法。

关于其他组件可以从Bootstrap中文网找到相关案例

导航条一般在网页头部显示，给用户提供整个网站的浏览功能，包含一系列链接菜单。Bootstrap提供的导航条可以在移动设备上折叠：展开或隐藏，且在窗口宽度增加时逐渐变为水平展开模式。

导航条的定义方式为
```
< nav class = "navbar navbar-iniverse">
</nav>
1
2
```
类class="navbar navbar-inverse"指定了导航条的主题颜色为黑色，如果改为class="navbar navbar-default"则为银白色。一般情况下，可以在<nav>中添加一个<container>样式，该样式用于限定宽度以支持响应式布局，与<container>样式相对的是占满全屏宽度的<container-fluid>样式。具体调用形式如下
```
< nav class= "navbar navbar-inverse">
	<div class="container">
    
  </div>
</nav>
1
2
3
4
5
```
导航栏内容主体主要分为两部分，第一部分为导航栏头部，第二部分为导航栏目。导航栏头部的定义方式如下
```
< nav class="navbar-header">
</nav>
1
2
```
通常情况下，导航栏头包含一个折叠按钮和一个“品牌”标签链接。折叠按钮调用方式如下
```
< button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
        data-target="#bs-example1" 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>
1
2
3
4
5
6
7
```
Bootstrap通过JavaScript已经为折叠按钮设计好了响应动作，其中，data-target属性用于指明需要折叠的导航栏目。“品牌”链接一般用于设计网站的logo图标，可以用发一些的字体显示，也可以用小图标代替，但是不适合大的logo图标

导航栏目的定义方式如下
```
< div class="collapse navbar-collapse" id="bs-example1">
</div>
1
2
```
其中，calss="collapse navbar-collapse"用于表示导航栏可以折叠，id与前面折叠按钮中的data-target属性相对应。具体的导航栏目可以分为左右两部分，每一部分以HTML的无序列表<ul>表示。具体样例如下
```
< ul class='nav navbar-nav'>
  < li class='active'>
  	<a href='#'>链接1</a>
  </li>
  < li class='dropdown'>
  	< a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button' 
       aria-haspopup='true' aria-expanded='false'>下拉链接< span class='caret'></span></a>
    <ul class='dropdown-menu'>
      <li><a href='#'>链接2</a></li>
      <li role='separator' class='divider'></li>
      <li><a href='#'>链接3</a></li>
    </ul>
  </li>
</ul>
<ul class='nav navbar-nav navbar-right'>
  <li><a href='#'>链接4</a></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```
上述代码需要注意下拉菜单的使用，通过类class="dropdown"进行声明。与折叠按钮相似，导航条中的下拉菜单可以直接使用Bootstrap提供好的JavaScript插件来响应动作，即鼠标点击可以展开下拉菜单，再次点击能够折叠菜单。

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】

Django学习笔记：Bootstrap框架基础_

Bootstrap框架使用介绍

Bootstrap栅格布局

Bootstrap组件使用介绍