bootstrap基础

最新推荐文章于 2021-09-13 22:34:55 发布

jhon_knight

最新推荐文章于 2021-09-13 22:34:55 发布

阅读量67

点赞数

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

本文链接：https://blog.csdn.net/jhon_knight/article/details/88937001

版权

WEB前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

bootstrap项目文件结构示例：
在这里插入图片描述
具体html代码如下：

<!DOCTYPE html> 
<!-- bootstrap基础 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="jquery.js"></script>
    <script src="jquery.js"></script>
</head>
<!-- bootstrap中改变行和字体的方式 -->
<body  style="line-height:40px;font-size: 30PX;"> 
    <div class="container">
    <div class="row">
        <!-- 同一行，最好设置12个列，如果大于12列，则会自动换行 -->
        <div class="col-lg-5">
        <!-- bootstrap提供的新的副标题标签 -->
        <h1>bootstrap<small>first</small></h1>
        </div>
        <!-- 不同class的不同属性，可以更改页面在不同的设备上的显示方式 -->
        <!--       超小屏幕      小屏幕      中等屏幕     大屏幕 -->
        <!-- 超小屏幕例如手机，总是水平排列的 -->
        <!-- 其他：开始是堆叠在一起的，当大于这些阈值时将变为水平排列C -->
        <!-- 类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg- -->
        <div class="col-lg-7" claas="col-md-12">  
        <div class="col-lg-10">
        <!-- lead可使文本更加醒目 -->
        <!-- text-center属性可使文本居中1 -->
            <p class="lead text-right">重点之在</p>  
        </div> 
        <!-- 斜体文字 -->
        <!-- 字体变小 -->
        <div class="col-lg-5"><p><em>斜体</em>文字<small>变小</small></p> </div>
        </div>
    </div>
    <div class="row">
        <!-- bootstrap提供有序列表ol和无须列表ul -->
        <div class="col-lg-6">
            <!-- 使列表菜单无样式 -->
            <ul class="list-unstyled">
                <li>吃饭</li>
                <li>喝茶
                    <ol>
                        <li>龙井</li>
                        <li>毛尖</li>
                        <li>铁观音</li>
                    </ol>
                </li>
                <li>休息</li>
            </ul>
        </div>
        <div class="col-lg-6">
            <!-- 设为水平显示 -->
            <dl class="dl-horizontal">
                <dt>teacher chen：
                </dt>
                <dd>
                    <!-- 添加代码特效显示 -->
                    <kbd>ctrl+d
                    </kbd>快速复制
                </dd>
            </dl>
            <dl>
                <dt>teacher zhang</dt>
                <dl>26995565</dl>
            </dl>
        </div>
        <div class="col-lg-12  ">
        <!-- bootstrap对表格的样式支持 -->
        <table class="table  table-hover table-bordered     ">
            <tr>
                <td>姓名</td>
                <td>电话号码</td>
            </tr>
            <tr>
                <td>陈</td>
                <td>15566565651</td>
            </tr>
            <tr>
                <td>张</td>
                <td>5595845898</td>
            </tr>
        </table>
        </div>
    </div>
    </div>
</body>
</html>

jhon_knight

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap基础

bootstrap项目文件结构示例：具体html代码如下：<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...
复制链接

扫一扫

专栏目录