Bootstrap安装和使用
bootstrap简介
Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活。它基于HTML、CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件,用起来简单,粗暴。
安装bootstrap
1、进入bootstrap官网
2、选择版本,点击下载bootstrap(这里以v4.6为例)
3、点击下载bootstrap生产文件
4、解压文件
也可以直接导入Boostrap CDN
https://www.bootcdn/twitter-bootstrap/
<head>
<meta charset="UTF-8">
<title>网格系统</title>
<!--CDN导入-->
<link href="https://cdn.bootcdn/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
</head>
注意版本!
bootstrap的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网格系统</title>
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css"/>
</head>
<body>
<!--
容器布局:
container 类用于固定宽度并支持响应式布局的容器。
container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
-->
<div class="container">
<!--行元素-->
<div class="row">
<!--
列元素:一行总共12列,如果超过了12列则会到下一行
-->
<div class="col-md-4" style="background-color: red">第一块</div>
<div class="col-md-4" style="background-color: #1e7e34">第二块</div>
<div class="col-md-4" style="background-color: #005cbf">第三块</div>
</div>
<div class="row">
<div class="col-md-4" style="background-color: #20c997">第一块</div>
<div class="col-md-4" style="background-color: #dc3545">第二块</div>
<div class="col-md-5" style="background-color: #491217">第三块</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-10">
<button type="submit" style="background-color: #4e555b">提交</button>
</div>
</div>
</div>
</body>
</html>
具体使用可以查看:菜鸟教程
更多推荐
Bootstrap——安装、导入以及简单使用
发布评论