ACCP8.0Y2Web前端框架與移動應用開發第3章Bootstrap組件

時間 2019-11-24

標籤 accp8.0y2web accp web 前端框架移動應用開發 bootstrap 組件欄目 HTML 简体版

原文原文鏈接

雜記css

1.圖標組件注意項html

不要和其餘組件混合使用

只對內容爲空的元素起做用

改變圖標字體文件的位置(要在同級目錄)

2.輸入框組注意事項jquery

只支持文本輸入框 `<input>`

輸入框組中的工具提示和彈出框須要特別的設置

不要和其餘組件混用

做爲額外元素的多選框和單選框

一.單詞部分bootstrap

dropdown下拉菜單 nav導航 navbar導航條 toggle可見狀態閉包

thumbnail縮略圖 media媒體 list-group列表組 pagination分頁導航工具

二.預習部分學習

1.bootstrap有哪些組件？分別是什麼測試

①css組件 ②js組件字體

前者：列表，進度條.......ui

後者:選項卡，警告框.........

2.使用bootstrap能夠直走幾種導航樣式分別是什麼

①選項卡導航.nav-tabs

②膠囊式選項卡導航.nav-pills

③自適應導航.nav-justified

④二級導航前面的和下拉菜單結合實現

三.練習部分

1.製做美聯英語在線VIP頁面-導航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>


<style>
    .container{
        background-color: #0f0f0f;
        height: 40px;
    }
    #ulli li{
        list-style: none;
        margin-top: 10px;
        margin-left: 50px;
        color: white;
        float: left;
    }
</style>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">


</head>
<body>
<div class="container">
    <ul id="ulli">

        <li><span class="glyphicon glyphicon-home"></span>首頁</li>
        <li><span class="glyphicon glyphicon-gift"></span>通用英語</li>
        <li><span class="glyphicon glyphicon-pencil"></span>海外考試</li>
        <li><span class="glyphicon glyphicon-globe"></span>青少英語</li>
        <li><span class="glyphicon glyphicon-tower"></span>行業英語</li>
        <li><span class="glyphicon glyphicon-shopping-cart"></span>在線購買</li>
        <li><span class="glyphicon glyphicon-user"></span>全球師資</li>
        <li>
            <div class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown">更多欄目</a>
                <span class="caret"></span>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li><a href="#" role="menuitem">學員案例</a> </li>
                <li><a href="#" role="menuitem">免費體驗</a> </li>
                <li><a href="#" role="menuitem">英語膠囊</a> </li>
                <li><a href="#" role="menuitem">精彩動態</a> </li>

            </ul>
        </div></li>

    </ul>

</div>


</body>
</html>

2.製做課工場響應式導航條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>課工場</title>

</head>
<body>
<nav class="nav navbar-inverse">
    <div class="navbar-header">
        <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>
            <span class="icon-bar"></span>

        </button>
        <img src="image/logo.png"  width="140" height="30" class="navbar-brand">

    </div>
    <div class="collapse navbar-collapse navbar-left">
        <ul class="nav navbar-nav">

            <li><a href="#" class="active">首頁</a></li>
            <li><a href="#">入門課</a></li>
            <li><a href="#">崗位課</a></li>
            <li><a href="#">技能庫</a></li>
            <li><a href="#">微社區</a></li>
            <li><a href="#">學員<span style="margin-left: 6px;" class="label label-danger">new</span> </a></li>

        </ul>

    </div>
    <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="請輸入要搜索的內容">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
    </form>
</nav>
<script src="../jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.min.js"></script>


</body>

</html>

3.製做優酷視頻列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>優酷視頻列表</title>
    <script src="../jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/bootstrap.min.js"></script>
    <style>
        #row{

            border-top: 1px black solid;
        }
        .col-md-3{
            margin-top: 20px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row"><div class="col-md-2"><img src="image/1.jpg">七月獨播</div><br>
        <br><br>

    </div>
    <div class="row" id="row">
        <div class="col-md-3 col-xs-6">
            <div class="thumbnail">
                <img src="image/2.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-xs-6">
            <div class="thumbnail">
                <img src="image/2.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-xs-6">
            <div class="thumbnail">
                <img src="image/2.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-xs-6">
            <div class="thumbnail">
                <img src="image/2.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>

    </div>
</div>
</body>
</html>

4.製做QQ消息列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
    #container{
        background-color: rgba(29,140,255,0.36);

    }
    .col-xs-1{
        margin: 5px;
    }
    #ulli li{
        float: left;
        list-style: none;
        margin-left: 20px;
    }
</style>
</head>
<body>
<div class="container" id="container">
    <div class="row">
        <div class="col-xs-1"><img src="image/1.jpg" width="32" height="30"></div>
        <div class="col-xs-1 col-xs-push-8"><img src="image/2.jpg" width="32" height="30"></div>
    </div></div>

<ul class="list-group">
    
    <li class="list-group-item"><img src="image/3.jpg" width="32" height="30"><span><strong style="font-size: 20px">任務三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;閉包扥使用原理
    <span class="badge">1</span>
    </li>
    <li class="list-group-item"><img src="image/4.jpg" width="32" height="30"><span><strong style="font-size: 20px">任務三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;閉包扥使用原理
        <span class="badge">1</span>
    </li>
    <li class="list-group-item"><img src="image/5.jpg" width="32" height="30"><span><strong style="font-size: 20px">任務三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;閉包扥使用原理
        <span class="badge">1</span>
    </li>
    <li class="list-group-item"><img src="image/6.jpg" width="32" height="30"><span><strong style="font-size: 20px">任務三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;閉包扥使用原理
        <span class="badge">1</span>
    </li>
    <li class="list-group-item"><img src="image/7.jpg" width="32" height="30"><span><strong style="font-size: 20px">任務三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;閉包扥使用原理
        <span class="badge">1</span>
    </li>
    <li class="list-group-item"><img src="image/7.jpg" width="32" height="30"><span><strong style="font-size: 20px">任務三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;閉包扥使用原理
        <span class="badge">1</span>
    </li>
    <li class="list-group-item"><img src="image/5.jpg" width="32" height="30"><span><strong style="font-size: 20px">任務三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;閉包扥使用原理
        <span class="badge">1</span>
    </li>
    <li class="list-group-item"><img src="image/6.jpg" width="32" height="30"><span><strong style="font-size: 20px">任務三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;閉包扥使用原理
        <span class="badge">1</span>
    </li>
</ul>
<div class="container">
    <nav class="navbar navbar-default navbar-fixed-bottom" style="opacity:0.8;">
        <div class="row">
        <div class="col-xs-2 col-xs-push-1"><span class="glyphicon glyphicon-envelope" style="margin-left: 5px"></span><br>消息</div>
            <div class="col-xs-2 col-xs-push-3"><span class="glyphicon glyphicon-user" style="margin-left: 5px"></span><br>消息</div>
            <div class="col-xs-2 col-xs-push-5"><span class="glyphicon glyphicon-star" style="margin-left: 5px"></span><br>消息</div>
        </div>

    </nav>
</div>

</body>
</html>

四.總結部分

1.媒體對象

對齊

圖片或其餘媒體類型能夠頂部、中部或底部對齊。默認是頂部對齊。



<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

媒體對象列表

用一點點額外的標記，就能在列表內使用媒體對象組件（對評論或文章列表頗有用）。





<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

歡迎提問，歡迎指錯，歡迎討論學習信息有須要的私聊發佈評論便可都能回覆的

原文在博客園http://www.cnblogs.com/a782126844/有須要能夠聯繫扣扣：2265682997