该框架已经帮我们写好了很多页面样式,如果需要使用,只需要下载对应文件
直接CV拷贝即可
在使用Bootstrap的时候,所有的页面样式只需要通过修改class属性来调节即可
中文文档查询:https://www.bootcss.com/
twitter-bootstrap Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。
https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css
https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js
Bootstrap的js代码是基于jQuery的
在使用bootstrap做动态效果时一定要引入jQuery!!!
布局容器是指用于组织和排列其他元素的容器或容器类。在前端开发中,常用的布局容器有以下三种:
、
等都是块级布局容器。块级容器会独占一行,并通过CSS属性进行自上而下的垂直排列。
- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Titletitle>
- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script>
- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">script>
- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">script>
-
- <style>
- .c1 {
- height: 1000px;
- width: 1000px;
- background-color: red;
- }
-
- .c2 {
- height: 1000px;
- width: 1000px;
- background-color: red;
- }
- style>
-
- head>
- <body>
- <div class="container c1">div> /*左右两侧有留白*/
- <div class="container-fluid c2">div> /*左右两侧没有留白*/
- body>
- html>
- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Titletitle>
-
-
- <script src="Websource\jQuery\node_modules\jquery\dist\jquery.min.js">script>
- <script src="Websource\Bootstrap\js\bootstrap.min.js">script>
- <link rel="stylesheet" href="Websource\Bootstrap\css\bootstrap.min.css">
-
- <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap script>
- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"> // jqueryscript>
-
- <style>
- .c1 {
- height: 100px;
- background-color: red;
- border: 5px solid black;
-
- }
-
- .c2 {
- height: 100px;
- background-color: green;
- }
- style>
-
-
- head>
- <body>
-
- <div class="container">
- <div class="row">
- <div class="col-md-6 c1">div>
- <div class="col-md-6 c1">div>
-
- <div class="col-md-1 c1">div>
- <div class="col-md-1 c1">div>
- <div class="col-md-1 c1">div>
- <div class="col-md-1 c1">div>
- <div class="col-md-1 c1">div>
- <div class="col-md-1 c1">div>
- <div class="col-md-1 c1">div>
- <div class="col-md-1 c1">div>
- <div class="col-md-1 c1">div>
- <div class="col-md-1 c1">div>
- <div class="col-md-1 c1">div>
- <div class="col-md-1 c1">div>
- div>
-
- div>
-
- body>
- html>
<div class="row">
- 写一个 row 就是将所在区域划分成 12 份
<div class="col-md-6">div>
- 写一个 col-md-6 获取想要的份数
.col-md-offset-*
类可以将列向右侧偏移。*
选择器为当前元素增加了左侧的边距(margin)。.col-md-offset-4
类将 .col-md-4
元素向右侧偏移了4个列(column)的宽度。bootstrap在设置页面的时候将字体设置成了肉眼可以接受的好看一点的字体。
针对form表单,加样式优先考虑
form-control
- <button type="button" class="btn btn-default">(默认样式)Defaultbutton>
-
- <button type="button" class="btn btn-primary">(首选项)Primarybutton>
-
- <button type="button" class="btn btn-success">(成功)Successbutton>
-
- <button type="button" class="btn btn-info">(一般信息)Infobutton>
-
- <button type="button" class="btn btn-warning">(警告)Warningbutton>
-
- <button type="button" class="btn btn-danger">(危险)Dangerbutton>
-
- <button type="button" class="btn btn-link">(链接)Linkbutton>
- <p>
- <button type="button" class="btn btn-primary btn-lg">(大按钮)Large buttonbutton>
- <button type="button" class="btn btn-default btn-lg">(大按钮)Large buttonbutton>
- p>
- <p>
- <button type="button" class="btn btn-primary">(默认尺寸)Default buttonbutton>
- <button type="button" class="btn btn-default">(默认尺寸)Default buttonbutton>
- p>
- <p>
- <button type="button" class="btn btn-primary btn-sm">(小按钮)Small buttonbutton>
- <button type="button" class="btn btn-default btn-sm">(小按钮)Small buttonbutton>
- p>
- <p>
- <button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small buttonbutton>
- <button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small buttonbutton>
- p>
- <img src="..." alt="..." class="img-rounded">
- <img src="..." alt="..." class="img-circle">
- <img src="..." alt="..." class="img-thumbnail">
- <p class="bg-primary">...p>
- <p class="bg-success">...p>
- <p class="bg-info">...p>
- <p class="bg-warning">...p>
- <p class="bg-danger">...p>
- <div class="clearfix">...div>
- // Mixin itself
- .clearfix() {
- &:before,
- &:after {
- content: " ";
- display: table;
- }
- &:after {
- clear: both;
- }
- }
-
- // Usage as a mixin
- .element {
- .clearfix();
- }
span标签
- <span class="glyphicon glyphicon-align-left" aria-hidden="true">span>
-
- <button type="button" class="btn btn-default btn-lg">
- <span class="glyphicon glyphicon-star" aria-hidden="true">span> Star
- button>
可以改颜色 - 操作普通文本方法相同
<script> .c {color:red;} script>
图标参考网站:https://fontawesome.com.cn/