BootStrap学习笔记-阿里云开发者社区

BootStrap学习笔记

中文网：https://www.bootcss.com/

下载与使用
1、下载：https://v3.bootcss.com/getting-started/

2、下载完成后

拷贝dist/css中的bootstrap.min.css到项目css中
拷贝dist/css中的bootstrap.min.js到项目的js中

3、下载jquery.js
链接：https://jquery.com/
依赖jquery,需要先导入jquery或者直接引用网上的

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

详细下载信息：https://blog.csdn.net/weixin_43304253/article/details/116545514

文章目录

1、布局容器和栅格网格系统
- 1.1 布局容器
- 1.2 栅格网格系统
- - 1.2.1 列组合
  - 1.2.2 列偏移
  - 1.2.3列排序
  - 1.2.4列嵌套
2、常用样式
- 2.1排版
- - 2.1.1 标题
  - 2.1.2 段落
  - 2.1.3 强调
  - 2.1.4 对其效果
  - 2.1.5 列表
  - - 2.1.5.1 去点列表
    - 2.1.5.2 内联列表
  - 2.1.6 表格
  - - 2.1.6.1 表格样式
    - 2.1.6.2 th、tr、td样式
- 2.2表单
- - 2.2.1文本输入框
  - 2.2.2下拉选择框
  - 2.2.3文本域
  - 2.2.4 复选框
  - 2.2.5 单选框
  - 2.2.6 按钮
  - 2.2.7 表单布局
- 2.4 面板

1、布局容器和栅格网格系统

1.1 布局容器

1..container 类用于固定宽度并支持响应式布局的容器。
2、.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

1.2 栅格网格系统

1.2.1 列组合

将屏幕划分为十二份。通过row确定行数，通过col-md-占据几列。（类似表格中的colspan属性）

    <div class="container" style="background-color: pink;">
        <div class="row">
            <div class="col-md-6" style="background-color: blue;">6列</div>
            <div class="col-md-6" style="background-color: yellow;">6列</div>
        </div>

        <div class="row">
            <div class="col-md-4" style="background-color: red;">4列</div>
            <div class="col-md-8" style="background-color: deeppink;">8列</div>
        </div>

    </div>

在这里插入图片描述

1.2.2 列偏移

不希望相邻的元素紧挨着，使用col-md-offset-偏移的列组合数。

<div class="row">
            <div class="col-md-2" style="background-color: red;">4列</div>
            <div class="col-md-2 col-md-offset-2" style="background-color: greenyellow;">右偏移2列</div>
        </div>

在这里插入图片描述

1.2.3列排序

改变列的顺序

.col-md-push-* 星号代表移动的列数。push代表向后移动
.col-md-pull-* 星号代表移动的列数，pull代表向前移动

<div class="row">
            <div class="col-md-8 col-md-push-4" style="background-color: darkgoldenrod ;">向后移动4</div>
            <div class="col-md-4 col-md-pull-8" style="background-color: red;">向前移动8</div>
        </div>

在这里插入图片描述

1.2.4列嵌套

可以在列组合后的列内，继续嵌套

    <div class="row">
            <div class="col-md-6" style="background-color: green;">
                <div class="row">
                    <div class="col-md-2" style="background-color: yellow;">2</div>
                    <div class="col-md-4" style="background-color: yellowgreen;">4</div>
                    <div class="col-md-5" style="background-color: blueviolet;">5</div>
                    <div class="col-md-1" style="background-color: greenyellow;">1</div>
                </div>
            </div>
            <div class="col-md-6" style="background-color: palevioletred">1</div>

        </div>

在这里插入图片描述

2、常用样式

2.1排版

2.1.1 标题

h1-h6的标题覆盖
提供了对应的类名，为非标题元素设置样式.h1~.h6
提供了副标题

<h1>H1标题<small>副标题</small></h1>
        <h2>H2标题</h2>
        <div class="h1">我是转化的标题</div>

在这里插入图片描述

2.1.2 段落

使用.lead来突出强调内容（增大字号，加粗文本，对行高和margin做相应的处理）
<small>：小号字体
<strong>：加粗字体
<em>：斜体

    <p class="lead">这是<em>段落</em> ,<small>今天</small>是个好日子，<strong>斗罗大陆</strong>更新了</p>

在这里插入图片描述

2.1.3 强调

强调类名，这些强调通过颜色
.text-muted：提示，用浅色
.text-primary：主要，使用蓝色
.text-success：成功，使用浅绿色
.text-info:通知信息，浅蓝色
.text-warning：警告，黄色
.text-danger：危险，褐色

    <div class="text-muted">提示效果</div>
    <div class="text-primary">主要效果</div>
    <div class="text-success">成功效果</div>
    <div class="text-info">信息效果</div>
    <div class="text-warning">警告效果</div>
    <div class="text-danger">危险效果</div>

在这里插入图片描述

2.1.4 对其效果

左对齐：left
右对齐：right
居中对其：center
两端对其：justify

Bootstrapt通过定义四个类名来控制文本对其风格

    <p class="text-left">左对齐</p>
    <p class="text-center">居中对齐</p>
    <p class="text-right">右对齐</p>
    <p class="text-justify">两端对其</p>

在这里插入图片描述

2.1.5 列表

无序列表

<ul>
  <li>...</li>
</ul>

有序列表

<ol>
  <li>...</li>
</ol>

定义列表

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

2.1.5.1 去点列表

class="list-unstyled"

<ul class="list-unstyled">
  <li>...</li>
</ul>

例如：

    <ol class="list-unstyled">
        <li>java</li>
        <li>php</li>
        <li>c#</li>
    </ol>

在这里插入图片描述

2.1.5.2 内联列表

class="list-inline"

<ul class="list-inline">
  <li>...</li>
</ul>

    <ol class="list-inline">
        <li>java</li>
        <li>php</li>
        <li>c#</li>
    </ol>

在这里插入图片描述

2.1.6 表格

2.1.6.1 表格样式

基础样式：.table
附加样式：
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮
.table-condensed：紧凑型表格


        <table class=" table table-bordered  table-striped">
            <caption>图书信息</caption>
            <thead>
                <tr>
                    <th>书名</th>
                    <th>作者</th>
                    <th>价格</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>java</td>
                    <td>小红</td>
                    <td>34</td>
                </tr>

                <tr>
                    <td>C++</td>
                    <td>小黑</td>
                    <td>34</td>
                </tr>

                <tr>
                    <td>java</td>
                    <td>小红</td>
                    <td>34</td>
                </tr>
            </tbody>
        </table>

在这里插入图片描述

2.1.6.2 th、tr、td样式

提供五种，每种对应不同的背景色

.active：将悬停的颜色作用在行或者单元格
.success：表示成功的操作
.info：表示信息变化的操作
.warning：表示一个警告操作
.danger：表示一个危险的操作


        <table class=" table table-bordered  table-striped">
            <caption>图书信息</caption>
            <thead>
                <tr class="active">
                    <th>书名</th>
                    <th>作者</th>
                    <th>价格</th>
                </tr>
            </thead>

            <tbody>
                <tr class="success">
                    <td>java</td>
                    <td>小红</td>
                    <td>34</td>
                </tr>

                <tr class="info">
                    <td>C++</td>
                    <td>小黑</td>
                    <td>34</td>
                </tr>

                <tr class="warning">
                    <td>java</td>
                    <td>小红</td>
                    <td>34</td>
                </tr>

                <tr class="danger">
                    <td>C++</td>
                    <td>小红</td>
                    <td>34</td>
                </tr>
            </tbody>
        </table>

在这里插入图片描述

2.2表单

向父 <form> 元素添加 role=“form”。
把标签和控件放在一个带有 class .form-group 的<div>中。这是获取最佳间距所必需的。
向所有的文本元素 input、textarea>和 select 添加 class =“form-control” 。
常见的元素包括：文本输入框、下拉选择框、单选按钮、文本域和按钮。

所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。

2.2.1文本输入框

input-lg：更大的框
input-sm：更小的框

        <div class="row">
            <div class="col-md-3 col-md-offset-1" >        
                <input  class="form-control" type="text" placeholder="请输入您的姓名" /><br />
                <input  class="form-control input-lg" type="text" placeholder="请`在这里插入代码片`输入您的姓名" /><br />
                <input  class="form-control input-sm" type="text" placeholder="请输入您的姓名" /><br />
            </div>    
        </div>

在这里插入图片描述

2.2.2下拉选择框

        <div class="row">
            <div class="col-md-2 col-md-offset-1">
                <select class="form-control">
                    <option>中国</option>
                    <option>俄罗斯</option>
                    <option>美国</option>
                </select>                
            </div>
        </div>

在这里插入图片描述

2.2.3文本域

    <div class="row">
            <div class="col-md-1 col-md-offset-1">
                <textarea class="form-control"></textarea>
            </div>
        </div>

在这里插入图片描述

2.2.4 复选框

垂直显示：.checkbox
水平显示：.checkbox-inline

        <div class="row">
            <div class="col-md-2 col-md-offset-3">
                <div class="checkbox">
                    <label><input type="checkbox" name="hobby" />画画</label>
                </div>

                <div class="checkbox">
                    <label><input type="checkbox" name="hobby" />弹琴</label>
                </div>

                <div class="checkbox">
                    <label><input type="checkbox" name="hobby" />跳舞</label>
                </div>

            </div>
        </div>

在这里插入图片描述

        <div class="row">
            <div class="col-md-2 col-md-offset-4">

                <label class="checkbox-inline"><input type="checkbox" name="hobby" />画画</label>

                <label class="checkbox-inline"><input type="checkbox" name="hobby" />弹琴</label>

                <label class="checkbox-inline"><input type="checkbox" name="hobby" />跳舞</label>

            </div>
        </div>

在这里插入图片描述

2.2.5 单选框

垂直显示：.radio
水平显示：.radio-inline

        <div class="row">
            <div class="col-md-2 col-md-offset-3">
                <div class="radio">
                    <label><input type="checkbox" name="sex" />男</label>
                </div>

                <div class="radio">
                    <label><input type="checkbox" name="sex" />女</label>
                </div>

            </div>
        </div>

在这里插入图片描述

        <div class="row">
            <div class="col-md-2 col-md-offset-4">

                <label class="checkbox-inline"><input type="radio" name="sex" />男</label>

                <label class="checkbox-inline"><input type="radio" name="sex" />女</label>

            </div>
        </div>

在这里插入图片描述

2.2.6 按钮

1、使用button实现
基础样式：btn
附加样式：btn-danger、btn-primary、btn-info、btn-success、btn-default、btn-warning、btn-link

        <div class="row">
            <div class="col-md-1 col-md-offset-5">
                <button class="btn btn-danger">我是按钮</button><br />
                <button class="btn btn-primary">我是按钮</button><br />
                <button class="btn btn-info">我是按钮</button><br />
                <button class="btn btn-success">我是按钮</button><br />
                <button class="btn btn-default">我是按钮</button><br />
                <button class="btn btn-warning">我是按钮</button><br />
                <button class="btn btn-link">我是按钮</button><br />
            </div>
        </div>

在这里插入图片描述
2、多标签支持：使用a div等制作按钮

    <a class="btn btn-info" href="https://www.baidu.com">百度</a>
        <span class="btn btn-success">span标签</span>
        <div class="btn btn-warning">div标签按钮</div>

在这里插入图片描述
3、使用.btn-sm、.btn-lg或者.btn-xs获得不同尺寸的按钮

        <div class="row">
            <div class="col-md-2 col-md-offset-4">
                <button class="btn btn-info btn-lg">按钮</button>
                <button class="btn btn-warning btn-sm">按钮</button>
                <button class="btn btn-info btn-xs">按钮</button>
            </div>
        </div>

在这里插入图片描述

2.2.7 表单布局

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

        <form class="form-horizontal">

            <div class="form-group">
                <label class="control-label col-md-2" for="name">姓名</label>
                <div class="col-md-5">
                    <input class="form-control" type="text" id="name" placeholder="请输入姓名" />
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2" for="pwd">密码</label>
                <div class="col-md-5">
                    <input class="form-control" type="text" id="pwd" placeholder="请输入密码" />
                </div>
            </div>

        </form>

在这里插入图片描述
为 <form> 元素添加.form-inline类可使其内容左对齐并且表现为 inline-block 级别的控件

        <form class="form-inline">
            <div class="form-group">
                <label class="control-label" for="name">姓名:</label>
                <input class="form-control" id="name" placeholder="请输入姓名" />
            </div>

            <div class="form-group">
                <label class="control-label" for="pwd">密码:</label>
                <input class="form-control" id="pwd" placeholder="请输入密码" />
            </div>
            <div class="form-group">
                <button class="btn btn-info">提交</button>
            </div>
        </form>

在这里插入图片描述

2.3 缩略图

BootStrap学习笔记

文章目录

1、布局容器和栅格网格系统

1.1 布局容器

1.2 栅格网格系统

1.2.1 列组合

1.2.2 列偏移

1.2.3列排序

1.2.4列嵌套

2、常用样式

2.1排版

2.1.1 标题

2.1.2 段落

2.1.3 强调

2.1.4 对其效果

2.1.5 列表

2.1.5.1 去点列表

2.1.5.2 内联列表

2.1.6 表格

2.1.6.1 表格样式

2.1.6.2 th、tr、td样式

2.2表单

2.2.1文本输入框

2.2.2下拉选择框

2.2.3文本域

2.2.4 复选框

2.2.5 单选框

2.2.6 按钮

2.2.7 表单布局

2.4 面板

热门文章

最新文章

相关课程

相关电子书