前端基础之《Bootstrap（3）—全局CSS样式_排版、代码、表格和按钮》

csj50

已于 2022-11-02 10:36:38 修改

阅读量306

点赞数

分类专栏：前端基础文章标签： bootstrap 前端

于 2022-11-01 14:46:04 首次发布

本文链接：https://blog.csdn.net/csj50/article/details/127633572

版权

前端基础专栏收录该内容

55 篇文章 0 订阅

订阅专栏

一、排版

1、标题（.page-header）
从<h1>到<h6>均可使用page-header样式。

<body>
	<div>
        <h1 class="page-header">h1. Bootstrap heading</h1>
        <p class="lead">有lead样式</p>
        <p>没有lead样式</p>
    </div>
</body>

效果：

2、段落（.lead）
p标签：p标签与生俱来外上边距、外下边距都改了。（见上面）

3、<mark></mark>标记

4、<del></del>删除线

5、<s></s>删除线

6、<ins></ins>下划线

7、<small></small>小号字体

8、文本对齐
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐

9、文本大小写
.text-lowercase：小写
.text-uppercase：大写
.text-capitalize：首字母大写

10、无样式列表（.list-unstyled）
没有小点点。

<body>
    <ul class="list-unstyled">
        <li>linux</li>
        <li>linux</li>
        <li>linux</li>
        <li>linux</li>
        <li>linux</li>
    </ul>
</body>

11、内联列表（.list-inline）
通过设置display: inline-block;把块标签变成行标签。

12、自定义列表

    <dl>
        <dt>选择题：</dt>
        <dd>A. xxx</dd>
        <dd>B. xxx</dd>
        <dd>C. xxx</dd>
        <dd>D. xxx</dd>
    </dl>

13、水平排列列表（.dl-horizontal）

二、代码

1、<code></code>内联代码

2、<pre></pre>代码块

3、<kbd></kbd>用户输入

三、表格

1、基本格式（.table）
从原本挤在一起，瞬间分开了。

2、条纹状（.table-striped）
增加了明暗条纹。

3、带边框（.table-bordered）

4、鼠标悬停（.table-hover）
鼠标放上去会有移动效果。

5、紧缩表格（.table-condensed）

<body>
    <div class="container">
        <h1 class="page-header">bootstrap前端框架</h1>
        <table class="table table-striped table-bordered table-hover table-condensed">
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
            <tr>
                <td>001</td>
                <td>002</td>
                <td>003</td>
            </tr>
            <tr>
                <td>001</td>
                <td>002</td>
                <td>003</td>
            </tr>
            <tr>
                <td>001</td>
                <td>002</td>
                <td>003</td>
            </tr>
            <tr>
                <td>001</td>
                <td>002</td>
                <td>003</td>
            </tr>
            <tr>
                <td>001</td>
                <td>002</td>
                <td>003</td>
            </tr>
        </table>
    </div>
</body>

6、响应式表格（.table-responsive）
将table包裹在<div class="table-responsive"></div>中，缩小屏幕会出现水平滚动条。

四、按钮

1、按钮样式（.btn）

2、白色（.btn-default）

3、蓝色（.btn-primary）

4、绿色（.btn-success）

5、青色（.btn-info）

6、红色（.btn-warning）

7、黄色（.btn-danger）

8、把按钮做的和a链接一样（.btn-link）

9、大按钮（.btn-lg）

10、小按钮（.btn-sm）

11、微小按钮（.btn-xs）

12、button变为块标签，独占一行（.btn-block）

13、禁用按钮（disabled属性）

14、哪些标签可以做按钮

<button class="btn btn-primary btn-block btn-lg">个人信息</button>
<a class="btn btn-primary btn-block btn-lg" href="">个人信息</a>
<input type="button" class="btn btn-primary btn-block btn-lg" value="OK" />
<input type="submit" class="btn btn-primary btn-block btn-lg" value="OK" />
<input type="reset" class="btn btn-primary btn-block btn-lg" value="OK" />

csj50

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础之《Bootstrap（3）—全局CSS样式_排版、代码、表格和按钮》

将table包裹在中，缩小屏幕会出现水平滚动条。6、响应式表格（.table-responsive）10、无样式列表（.list-unstyled）5、紧缩表格（.table-condensed）3、带边框（.table-bordered）11、内联列表（.list-inline）2、条纹状（.table-striped）4、鼠标悬停（.table-hover）1、标题（.page-header）3、标记。
复制链接

扫一扫

专栏目录