bootstrap笔记

最新推荐文章于 2024-09-14 17:04:32 发布

mayi666777

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量165

点赞数

分类专栏：其他文章标签： bootstrap css html

本文链接：https://blog.csdn.net/mayi666777/article/details/125033179

版权

其他专栏收录该内容

2 篇文章 0 订阅

订阅专栏

安装

BootStrap 直接中文网下载解压

https://v3.bootcss.com/

jquery 下载解压

加载:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>

<body>

    haole
    <script src="jquery-3.6.0.js"></script> 
    <script src="dist/js/bootstrap.min.js"></script>
</body>

</html>

布局容器和栅格网络系统

https://v3.bootcss.com/css/#grid

布局容器

利用 DIV 搭建一个大的容器里面放其他的DIV 形成布局

.container
栅格网络系统

.row ==> 行

.clo ==> 列

.col-md-4 (md模式宽度为4 )

.clo -xs -宽度

.clo -sm -宽度

.col-md-宽度

.col-lg-宽度

**必须在一个容器中网格为 1行 2列(第一列占2格,第二列8格每行总宽度不超过12) **

    <div class="container">
        <div class="row">
            <!-- 列元素 clo -xs -数值 ,clo -sm -数值 ,col-md-数值 ,col-lg-数值 -->
            <div class="col-md-2" style="background-color: blue;">4列</div>
            <div class="col-md-8" style="background-color: brown;">8列</div>
        </div>
    </div>

列偏移
嵌套列
列排序

排版

https://v3.bootcss.com/css/#type-alignment

标题
段落
强调
对齐效果

行(.row) 中元素对齐

align-items-start(上对齐)

align-items-center(中心对齐)

align-items-end下对齐)

text-start (左对齐)

text-center (中心对齐)

text-end (右对齐)

列(.col) 中元素的单独对齐

text-start (左对齐)

text-center (中心对齐)

text-end (右对齐)
列表

代码

https://v3.bootcss.com/css/#code

<code>单行代码 </code>

<pre> 代码块 </pre>

.pre-scrollable 滚动条模式

表格

https://v3.bootcss.com/css/#tables

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式

.table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式

.table-bordered 类为表格和其中的每个单元格增加边框

.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应

.table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半

通过这些状态类可以为行或单元格设置颜色。

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.info`	标识普通的提示信息或动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

表单

https://v3.bootcss.com/css/#forms

表单控件

.form-control 会占一整行可以使用网格系统优化(row=>col-md-3 ==>form-control`)

.form-inline 左对齐

.form-horizontal 联合使用栅格类，可以将 label 标签和控件组水平并排布局

.input-lg .input-sm 表单控件的大小
输入框 text

只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
下拉选择框 select

.checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

multip = "multiple" 设置下拉框多选
静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。
焦点状态
禁用状态
只读状态
校验状态
控件尺寸

通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。

高度尺寸

水平排列的表单组的尺寸

调整列（column）尺寸