久久久久久亚洲精品,久久伊人精品一区二区三区,亚洲欧美日韩在线资源观看

首頁 > 博客列表 > Bootstrap的引入（0920）

博主信息

博文 35

粉絲 0

評論 0

訪問量 44232

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

實例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--1. 導入bootstrap樣式文件css;-->
    <link rel="stylesheet" href="lib/dist/css/bootstrap.css">
    <title>bootstrap導入</title>
</head>
<body>
<img src="1.jpg" alt="" class="img-circle img-responsive">
<div class="alert alert-danger">
    <a href="" class="close" data-dismiss="alert"> x </a>
    <strong>警告:</strong>你正的瀏覽的網(wǎng)站有成人內(nèi)容,您是否已經(jīng)18啦
</div>

<!--2. 導入支持文件: jquery.js-->
<script src="lib/jquery.js"></script>
<!--3. 導入bootstrap的js文件-->
<script src="lib/dist/js/bootstrap.js"></script>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

運行效果圖：

2）使用常見的組件，實現(xiàn)一個博客的首頁布局

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Bootstrap 博客首頁</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="lib/dist/css/bootstrap.css">
</head>
<body>

<nav class="nav navbar-inverse navbar-fixed-top" role="navgation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">
                <img src="img/baidu.png" style="width: 100px;height: 30px;">
            </a>

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首頁</a></li>
                <li><a href="#">新聞</a></li>
                <li><a href="#">國內(nèi)</a></li>
                <li><a href="#">國際</a></li>
            </ul>
            <div class="navbar-form navbar-right" style="margin-right: 30px;">
                <input type="text" class="form-control" name="" placeholder="請輸入搜索內(nèi)容">
                <button class="btn btn-success" style="margin-right: 30px;">搜索</button>
                <a href="#" class="navbar-link">注冊</a>
                <a href="#" class="navbar-link">登錄 </a>
            </div>
        </div>
    </div>
</nav>

    <div class="container-fluid" style="margin-top: 70px;">
        <div class="col-md-9">
            <div class="list-group">
                <?php for($i=0;$i<10;$i++):?>
                    <div class="list-group-item" style="border: 0;">
                        <a href="#"><h4>這是標題部分</h4></a>
                        <p>
                            <small>發(fā)布時間: 2016-6-6</small>
                            <small>點擊量: <span class="badge">20</span></small>
                        </p>
                        <p class="text-muted">這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分這是內(nèi)容部分
                        </p>
                        <p>
                            <span class="badge">關(guān)鍵字</span>
                            <span class="badge">關(guān)鍵字</span>
                            <span class="badge">關(guān)鍵字</span>
                        </p>
                    </div>
                    <div style="border: 1px dashed #ddd;"></div>
                <?php endfor; ?>

                <!-- 分頁 -->
                <div class="text-center">
                    <ul class="pagination">
                    <!-- 向前符號 -->
                    <li><a href="#">?</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">?</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 側(cè)邊欄 -->
        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    推薦新聞
                </div>
                <div class="panel-body">
                    <strong class="panel-title">
                    <a href="#">這里是新聞列表</a>
                    </strong>
                    <p>
                        這里是新聞內(nèi)容摘要這里是新聞內(nèi)容摘要這里是新聞內(nèi)容摘要這里是新聞內(nèi)容摘要這里是新聞內(nèi)容摘要這里是新聞內(nèi)容摘要這里是新聞內(nèi)容摘要這里是新聞內(nèi)容摘要這里是新聞內(nèi)容摘要這里是新聞內(nèi)容摘要這里是新聞內(nèi)容摘要這里是新聞內(nèi)容摘要
                    </p>
                </div>
            </div>

            <!-- 熱點新聞側(cè)邊欄 -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    熱點新聞
                    <a href="#" class="text-muted pull-right">>></a>
                </div>
                <ul class="list-group">
                <?php for($i=0;$i<5;$i++): ?>
                    <li class="list-group-item" style="border: 0;">
                        <a href="#" class="text-muted">新聞標題列表</a>
                    </li>
                <?php endfor; ?>
                </ul>
            </div>

            <!-- 多媒體 -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    推薦視頻
                    <a href="#" class="text-muted pull-right">>></a>
                </div>
                <ul class="media-list" style="margin: 5px;">
                    <?php for($i=0;$i<5;$i++): ?>
                        <li>
                        <div class="media">
                    <div class="media-left">
                        <img src="img/2.jpg" style="width: 50px;height: 50px;" class="media-object">
                    </div>
                    <div class="media-body">
                        <strong class="media-heading">這是視頻的標題</strong>
                        <p>多媒體列表項介紹</p>
                    </div>
                </div>
                    </li>
                    <?php endfor; ?>
                </ul>
            </div>

            <!-- 廣告位 -->
            <a href="#">
                    <img src="img/1.jpg" style="width: 100%;height: 100px;">
            </a>
        </div>
    </div>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

運行效果圖：

總結(jié)：Bootstrap是Twitter推出的一個用于前端開發(fā)的開源工具包，使用十分普遍，要多練習熟練運用。

批改狀態(tài)：未批改

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

設(shè)計模式和MVC（0907）

2018-09-10 22:59:02

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

實例

實例