一文入门Bootstrap

释怀°Believe

已于 2022-07-07 15:33:48 修改

阅读量293

点赞数 1

分类专栏： # BootStrap 文章标签： bootstrap 前端 html

于 2022-07-07 15:32:02 首次发布

本文链接：https://blog.csdn.net/qq_52986400/article/details/125651417

版权

BootStrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了Bootstrap的布局容器与栅格系统，包括容器类型、列组合、列偏移、列排序和列嵌套。同时，讲解了Bootstrap的常用样式，如标题、段落、强调、对齐方式、列表、代码样式、表格、表单控件、按钮以及表单布局。此外，还展示了如何使用缩略图和面板进行内容展示。

摘要由CSDN通过智能技术生成

一、布局容器

 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <title>Document</title>
   
</head>
<body>
    <!-- <div class="container" style="height: 800px; background:pink;">
            用于固定宽度并支持响应式布局
        </div> -->
    <div class="container-fluid" style="height: 800px; background:pink;">
        用于100%宽度，占据全部视口
    </div>
</body>

二、栅格网格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，栅格系统自动分为最多12列。栅格系统用于通过一系列的行与列的组合来创建页面，你的内容就可以放入这些创建好的布局中。
栅格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份或者32份），但12份是最常见的，在调整内外边距，最后结合媒体查询，就制作出了强大的响应式响应式网格系统。Bootstrap框架中的网格系统就是将容器平分为12份。
在这里插入图片描述
注意：网格系统必须用到css

在这里插入图片描述

栅格参数

在这里插入图片描述

2.1 列组合

原则：列综合不能超过12，大于12，则自动换到下一行。

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

    <hr>
    <div class="row">
        <!-- 均分为12份 -->
        <div class="col-md-1" style="background-color: pink;">1</div>
        <div class="col-md-1" style="background-color: blue;">2</div>
        <div class="col-md-1" style="background-color: green;">3</div>
        <div class="col-md-1" style="background-color: yellow;">4</div>
        <div class="col-md-1" style="background-color: pink;">5</div>
        <div class="col-md-1" style="background-color: pink;">6</div>
    </div>
    <hr>
    <div class="row">
       <!-- 均分为2块 -->
        <div class="col-md-6" style="background-color: pink;">1</div>
        <div class="col-md-6" style="background-color: blue;">2</div>
    </div>
    <hr>
    <div class="row">
        <!-- 均分为3块 -->
        <div class="col-md-4" style="background-color: pink;">1</div>
        <div class="col-md-4" style="background-color: blue;">2</div>
        <div class="col-md-4" style="background-color: green;">3</div>
    </div>
</div>
</body>

在这里插入图片描述

2.2 列偏移

如果我们不希望相邻的两个列紧靠在一起，但又不想使用margin给或者其他技术手段来，这个时候就可以使用列偏移（offest)来实现。只需要在列元素上添加类名"col-md-offest-*"（其中星号代表要偏移的列组合）

col-md-offest-8,表示该列向右移动8个列的宽度

 <div class="col-md-1" style="background-color: pink;">1</div>
        <div class="col-md-1 col-md-offset-1" style="background-color: blue;">2</div>

2.3列排序

列排序就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。通过添加类名col-md-push-*,往前pull,往后push
在这里插入图片描述

2.4 列嵌套

可以在一个列中添加一个或者多个行东起
在这里插入图片描述

三、常用样式

3.1排版

3.1.1标题

和HTML页面一样，定义标题都是使用标签h1-h6，只不过Bootstrap覆盖了其默认的样式，使用在所有浏览器下显示的效果一样。同时，可以通过small设置副标题。
在这里插入图片描述

3.1.2段落

通过.lead来突出强调内容（其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
在这里插入图片描述

3.1.3强调

定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来强调

   <div class="container" style="height: 800px; background:white;">
          <div class="text-muted">提示，使用浅灰色（#999）</div>
          <div class="text-primary">主要，使用蓝色（#428bca)</div>
          <div class="text-success">成功，使用浅绿色（#3c763d)</div>
          <div class="text-info">通知信息，使用浅蓝色（#31708f)</div>
          <div class="warning">警告，使用黄色(#8a6d3b)</div>
          <div class="text-danger">危险，使用褐色</div>
</div>

3.1.4对齐方式

text-align
其中主要使用四种风格：
左对齐：取值left
居中对齐：center
右对齐：right
两端对齐：justify
在这里插入图片描述

3.1.5列表

在这里插入图片描述

1.去点列表

在这里插入图片描述
2.内联列表
把垂直列表换成水平列表，而且去掉项目符号，保持水平显示。

在这里插入图片描述
3.定义列表

3.1.6代码❤️❤️❤️

一般在个人博客上使用的较为平凡，用于显示代码的风格。

在这里插入图片描述

3.1.7表格

基础样式
附加样式

.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格，单元格没有内边距，或者很小

tr.th.td样式
通过了五种不同的类名，每种类名控制了行的不同背景色

<table class="table table-bordered table-striped table-hover table-condensed">
    <tr class="info">
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr class="success">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr class="warning">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr class="active">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr class="danger">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

在这里插入图片描述

3.2表单

3.2.1表单控件

.form-control .input-lg（较大） .input-sm（较小）
1.输入框text

<body>
    <input type="text"/><br>
    <select>
        <option value="">请选择城市</option>
        <option value="">城市1</option>
        <option value="">城市2</option>
    </select><br>
    <textarea></textarea>
    <!-- 文本框 -->
    <div class="row">
        <div class="col-md-3">
            <input type="text" class="from-control input-sm" /><br>
            <input type="text" class="from-control input-lg" />
            <br>
        </div>
    </div>

    <!-- 下拉框 -->
    <div class="row">
        <div class="col-md-2">
            <select class="form-control">
                <option value="">请选择城市</option>
                <option value="">城市1</option>
                <option value="">城市2</option>
            </select><br>
            <select class="form-control" multiple>
                <option value="">请选择城市</option>
                <option value="">城市1</option>
                <option value="">城市2</option>
            </select><br>
        </div>
    </div>
</body>

在这里插入图片描述
2.复选框checkbox

3.2.2按钮

 <button class="btn">按钮</button>
    <button class="btn btn-danger">按钮</button>
    <button class="btn btn-success">按钮</button>
    <button class="btn btn-warning">按钮</button>
    <button class="btn btn-primary">按钮</button>
    <button class="btn btn-warning">按钮</button>
    <button class="btn btn-info">按钮</button>
    <button class="btn btn-default">按钮</button>
    <button class="btn btn-link">按钮</button>

在这里插入图片描述

<a href="#" class="btn btn-success">a标签</a>
<span class="btn btn-danger">span标签</span>
<div class="btn btn-warning">div标签</div><br>
<!-- 设置按钮大小 -->
<button class="btn btn-danger">按钮</button>
<button class="btn btn-success btn-lg">按钮</button>
<button class="btn btn-warning btn-sm">按钮</button>
<button class="btn btn-warning btn-xs">按钮</button>
<!-- 按钮禁用 -->
<button class="btn btn-info" onclick="alert('Hello');" disabled>按钮</button>
<button class="btn btn-primary" onclick="alert('Hello');" disabled>按钮</button>

3.2.2表单布局

基本的表单结构是bootstrap自带的，个别的表单空间自动接收一些全局样式。
下面给出了创建基本表单的步骤：

向父form元素添加role=“form";
把标签和空间放在一个带有class.form.group的div中，这是获取最佳间距所必须的。
向所有的文本元素input,textarea,和select添加class="form-control”；
1.水平表单

2.内联表单

在这里插入图片描述

3.3缩略图❤️❤️

 <div class="container">
        <div class="row">
           
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="../img/1.jpg" style="width: 240px; height: 360px">
                    <h3>好看</h3>
                    <p>零零零零</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span>喜欢</button>
                    <button class="btn btn-info">  
                        <span class="glyphicon glyphicon-pencil"></span>评论 
                    </button>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="../img/1.jpg" style="width: 240px; height: 360px">
                    <h3>好看</h3>
                    <p>零零零零</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span>喜欢</button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span>评论
                    </button>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="../img/1.jpg" style="width: 240px; height: 360px">
                    <h3>好看</h3>
                    <p>零零零零</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span>喜欢</button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span>评论
                    </button>
                </div>
            </div>


            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="../img/1.jpg" style="width: 240px; height: 360px">
                    <h3>好看</h3>
                    <p>零零零零</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span>喜欢</button>
                    <button class="btn btn-info">  
                        <span class="glyphicon glyphicon-pencil"></span>评论 
                    </button>
                </div>
            </div>
        

        </div>
    </div>

在这里插入图片描述

3.4面板

设置基本的边框（border)和内补（padding)来包含内容。
.pannel-default:默认样式
.pannel-heading:面板头
.pannel-body:面板主体内容
在这里插入图片描述

   <div class="panel panel-warning">
    <div class="panel-heading">
       <h2 align="center">明星合集</h2>
    </div>
    <div class="panel-body">
        <div class="row">
        
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="../img/1.jpg" style="width: 240px; height: 360px">
                    <h3>好看</h3>
                    <p>零零零零</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span>喜欢</button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span>评论
                    </button>
                </div>
            </div>
        
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="../img/1.jpg" style="width: 240px; height: 360px">
                    <h3>好看</h3>
                    <p>零零零零</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span>喜欢</button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span>评论
                    </button>
                </div>
            </div>
        
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="../img/1.jpg" style="width: 240px; height: 360px">
                    <h3>好看</h3>
                    <p>零零零零</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span>喜欢</button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span>评论
                    </button>
                </div>
            </div>
        
        
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="../img/1.jpg" style="width: 240px; height: 360px">
                    <h3>好看</h3>
                    <p>零零零零</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span>喜欢</button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span>评论
                    </button>
                </div>
            </div>
        
        
        </div>
    </div>
   </div>