Bootstrap学习(二)

最新推荐文章于 2022-10-19 18:57:39 发布

原创最新推荐文章于 2022-10-19 18:57:39 发布 · 555 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #样式

Bootstrap 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Bootstrap框架中的各种布局和样式应用技巧，包括div、文本、列表、表格及表单样式的设置方法，帮助读者快速掌握响应式网页设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、div样式：

container 固定宽度并且具有响应式
container-fluid自由宽高(100%)
jumbotron 超大屏幕
row 行
col-sm-3 列数: 12意味了占满12个列，即全屏宽度（如果是6则占一半）

  <div class="container"></div>
  <div class="container"></div>

//带有边距和圆角效果
<div class="container">
<div class="jumbotron">
        <h1>我的第一个 Bootstrap 页面</h1>
        <p>重置窗口大小，查看响应式效果！</p>
</div>
</div>

//不带有边距和圆角效果
<div class="jumbotron">
<div class="container">
        <h1>我的第一个 Bootstrap 页面</h1>
        <p>重置窗口大小，查看响应式效果！</p>
</div>
</div>

<div class="row">
        <div class="col-sm-3">
            <h3>第一列</h3>
            <p>学的不仅是技术，更是梦想！</p>
            <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
        </div>
        <div class="col-sm-3">
            <h3>第二列</h3>
            <p>学的不仅是技术，更是梦想！</p>
            <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
        </div>
        <div class="col-sm-3">
            <h3>第三列</h3>
            <p>学的不仅是技术，更是梦想！</p>
            <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
        </div>
        <div class="col-sm-3">
            <h3>第四列</h3>
            <p>学的不仅是技术，更是梦想！</p>
            <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
        </div>
    </div>

2、文本样式：

text-left 文本左对齐
text-right 文本右对齐
text-center 居中对齐
text-justify 两端对齐

<h1 class="text-center">早安</h1>
//字体大小
<font class="h1">行内块样式</font>

3、列表样式：

list-inline 行内块
list-unstyled 无符号，去掉前面的符号

//行内块
<ul class="list-inline">
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVA</li>
</ul>

//无符号，去掉前面的符号 
<ul class="list-unstyled">
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVA</li>
</ul>

4、table样式：

table 表格全局样式（少量padding和水平方向的分割线）
table-striped 有条纹的背景色行（隔行变色）
table-bordered 带边框的表格
table-hover 鼠标悬听效果
table-condensed 紧凑的表格

<table class="table"></table>

//表格边框
<table class="table table-striped table-bordered">

table行或单元格背景色样式：

active
success
info
warning
danger

 <tr class="active">
 <td class="active">

响应式table：将table元素包裹在table-responsive元素内，即可创建响应式表格

<div class="table-responsive">
    <table class="table table-hover table-condensed">
        <tr class="active">
            <td>编号</td>
            <td>新闻标题</td>
            <td>发布者</td>
            <td>发布时间</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    </div>

5、form样式

form-group 表单组样式，将和表单元素包含其中，可以获得更好的排列
form-inline 可以使元素一行排列，用于form元素
form-control 表单元素样式，常用于，等元素
placeholder 用于
radio-inline 可以使一组单选框排列在同一行
checkbox-inline 可以使一组复选框排列在同一行
sr-only 可以用于隐藏元素

<!--form-inline 是表格横向排列-->
    <form class="form-inline">
        <div class="form-group">
            <!--sr-only 设置隐藏-->
            <label for="username" class="sr-only">用户名:</label>
            <input type="text" class="form-control" id="username" placeholder="请输入您用户名">
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="text" class="form-control" id="password" placeholder="请输入您的密码">
        </div>
    </form>