bootstrap基础（一）

最新推荐文章于 2025-10-21 10:34:21 发布

转载最新推荐文章于 2025-10-21 10:34:21 发布 · 270 阅读

文章标签：

#bootstrap

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍HTML和CSS的基本用法及示例，包括文本格式化、对齐方式、按钮设计及下拉菜单等元素的实现方法。

文本

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

字体图标

http://v3.bootcss.com/components/

<button type="button" class="btn btn-success btn-lg">
    <span class="glyphicon glyphicon-home"></span> Home
</button>
<button type="button" class="btn btn-info btn-sm">
    <span class="glyphicon glyphicon-ok"></span> OK
</button>
<button type="button" class="btn btn-danger btn-xs">
    <span class="glyphicon glyphicon-star"></span> Star
</button>

下拉菜单（Dropdowns）

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
            data-toggle="dropdown">
        主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

控件组

<div class="input-group input-group-sm">
    <span class="input-group-addon ">@</span>
<input type="text" class="form-control" >