小高不太行之前端--Bootstrap框架

最新推荐文章于 2024-01-09 23:10:09 发布

小高不太行

最新推荐文章于 2024-01-09 23:10:09 发布

阅读量278

点赞数

分类专栏：前端设计文章标签： bootstrap html css

本文链接：https://blog.csdn.net/m0_46568449/article/details/117426240

版权

小高不太行–前端框架Bootstrap

Bootstrap是目前很受欢迎的前端框架。可以作为开发基础。

文章目录

小高不太行--前端框架Bootstrap
前言
一、Bootstrap CSS
二、Bootstrap 布局组件
总结

前言

本文主要介绍一些Bootstrap的CSS应用，

一、Bootstrap CSS

（一）网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

（二）排版

在这里插入图片描述

（三）图片

.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

<body>

<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">

</body>

（四）按钮

在这里插入图片描述

二、Bootstrap 布局组件

（一）下拉菜单

下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与下拉菜单（Dropdown） JavaScript 插件的互动来实现。

<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
			data-toggle="dropdown">
		主题
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role