Bootstrap学习笔记
文章目录
- 一、模板
- 二、布局
-
- 1、布局容器
- 2、栅栏网格系统
- 三、样式
-
- 1、标题样式
- 2、段落样式
- 3、强调
- 4、对齐
- 四、列表
- 五、代码风格(标签)
- 六、表格风格
- 七、表单控件
-
- 1、文本框、下拉框
- 2、单选框、复选框
- 3、按钮
一、模板
在html页面中引入模板
doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.min.css">
<title>Hello, world!title>
head>
<body>
<script src="../js/jquery-1.7.2.min.js">script>
<script src="../bootstrap-3.4.1-dist/js/bootstrap.min.js">script>
body>
html>
二、布局
1、布局容器
页面的所有内容都放在此容器中
container:固定宽度并支持响应式布局的容器 (两侧会有留白)
container-fluid:100%宽度
2、栅栏网格系统
row 要放到容器(container)中
将容器平分为12份 列总和不能超过12
row：行
col：列
col-{breakpoint}-auto ：根据列内容的自然宽度调整列的大小
例：col-md-auto
col-*-#：该系统从堆叠开始，在断点处变为水平
*分为：xs、sm、md、lg 即超小(自动)、小、中、大
# 为数字 0-12 一行上列的总数不能超过12，否则会换行
例：col-md-4 、col-sm-8
col-*-offset-#：列偏移#个位置(不会覆盖 一起偏移)
col-*-offset-push-#：右浮动(会覆盖)
col-*-offset-pull-#：左浮动(会覆盖)
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: #d4d4d4">4div>
<div class="col-md-8" style="background-color: #d43f3a">8div>
div>
<div class="row">
<div class="col-lg-4" style="background-color: #ffff00">4div>
<div class="col-lg-4" style="background-color: #378637">4div>
<div class="col-lg-4" style="background-color: #dd44ff">4div>
div>
<div class="row">
<div class="col-sm-1" style="background-color: #009dff">1div>
<div class="col-sm-2 col-sm-offset-2" style="background-color: rgba(255,229,125,0.39)">2div>
<div class="col-sm-3 col-sm-push-2" style="background-color: #d4d4d4">3div>
div>
div>
三、样式
1、标题样式
h1~h6：设置标题(标签样式稍作修改)
small：副标题
2、段落样式
lead：增大文本
3、强调
text-muted：提示效果
text-primary：主要效果
text-success：成功效果
text-info：信息效果
text-warning：警告效果
text-danger：危险效果
例：
<div class="container">
<p class="text-muted">提示p>
<p class="text-primary">主要p>
<p class="text-success">成功p>
<p class="text-info">信息p>
<p class="text-warning">警告p>
<p class="text-danger">危险p>
div>
4、对齐
text-left：左对齐
text-center：居中对齐
text-right：右对齐
text-justify：两端对齐
四、列表
无序(ul)、有序(ol)、定义(dl)
list-unstyled：去点列表
list-inline：内联列表 水平方向 且去点
dl-horizontal：水平定义列表
<div class="container">
<ul class="list-unstyled">
<li>C++li>
<li>Javali>
<li>Pythonli>
ul>
<ol class="list-inline">
<li>C++li>
<li>Javali>
<li>Pythonli>
ol>
<dl class="dl-horizontal">
<dt>语言dt>
<dd>C++dd>
<dd>Javadd>
<dd>Pythondd>
<dt>作者dt>
<dd>001dd>
<dd>002dd>
<dd>003dd>
dl>
div>
五、代码风格(标签)
code：单行内联代码
pre：多行快代码
kbd：快捷键
<div class="container">
<code> A a =new A();code>
<pre>
public static void main(String []args){
System.out.println("Hello World!");
}
pre>
<p><kbd>ctrlkbd>+<kbd>skbd>保存p>
div>
六、表格风格
table：基础表格
(1) table样式
table-striped：斑马线表格
table-bordered：带边框的表格
table-hover：鼠标悬停高亮的表格
table-condensed：紧凑型表格，单元格没有内距(内距小)
(2)tr th td样式
active：将悬停的颜色应用在行或者单元格上
success：表示成功的操作
info：表示信息变化的操作
warning：表示一个警告的操作
danger：表示一个危险的操作
<div class="container">
<table class="table table-striped table-hover table-condensed">
<tr class="info">
<th class="warning">JavaSEth>
<th class="danger">JavaEEth>
<th class="success">JavaMeth>
tr>
<tr class="active">
<td>Mathtd>
<td>Springtd>
<td>APItd>
tr>
<tr class="success">
<td>Datetd>
<td>Hibernatetd>
<td>KVMtd>
tr>
table>
div>
七、表单控件
1、文本框、下拉框
form-control：定义样式
input-lg\sm：定义大小
<div class="container">
<label>
<input type="text" placeholder="请输入" class="form-control input-lg"/>
label><br>
<label>
<select class="input-sm">
<option>C++option>
<option>Pythonoption>
<option>Javaoption>
select>
label>
<label>
<textarea class="input-sm" placeholder="请输入" style="resize: none">textarea>
label>
div>
2、单选框、复选框
checkbox：好看点
checkbox-inline：水平显示
3、按钮
btn系列类
btn-lg/sm：设置按钮尺寸
例：
<button type="button" class="btn btn-outline-primary">Primarybutton>
<button type="button" class="btn btn-outline-secondary">Secondarybutton>
<button type="button" class="btn btn-outline-success">Successbutton>
<button type="button" class="btn btn-outline-danger">Dangerbutton>
<button type="button" class="btn btn-outline-warning">Warningbutton>
<button type="button" class="btn btn-outline-info">Infobutton>
<button type="button" class="btn btn-outline-light">Lightbutton>
<button type="button" class="btn btn-outline-dark">Darkbutton>