.net bootstrap 下拉树状选择框_Bootstrap搭建图书管理系统
生活随笔
收集整理的這篇文章主要介紹了
.net bootstrap 下拉树状选择框_Bootstrap搭建图书管理系统
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
https://www.zhihu.com/video/1246932038927360000
每日測驗
"""答案
1.昨日內(nèi)容回顧
樣式類操作
""" addClass() classList.add() removeClass() hasClass() toggleClass() """- css操作
- 位置操作
- 尺寸操作
- 文本操作
- 屬性操作
文檔處理
# jQuery如何創(chuàng)建標簽 document.createElement('p') === $('<p>')A.append(B) B.appendTo(A)prepend() prependTo()...remove() 移除標簽 empty() 清空標簽內(nèi)部所有的內(nèi)容- 事件處理
今日內(nèi)容概要
- 前端框架Bootstrap
- 手動搭建一個圖書管理系統(tǒng)頁面
今日內(nèi)容詳細
前端框架Bootstrap
該框架已經(jīng)幫你寫好了很多頁面樣式，你如果需要使用，只需要下載它對應文件，之后直接cv拷貝即可
在使用Bootstrap的時候所有的頁面樣式都只需要你通過class來調(diào)節(jié)即可
版本選擇建議使用v3版本：https://v3.bootcss.com/
注意
bootstrap的js代碼是依賴于jQuery的，也就意味著你在使用Bootstrap動態(tài)效果的時候，一定要導入jQuery
布局容器
<柵格系統(tǒng)
<柵格參數(shù)
.排版
bootstrap將所有原生的HTML標簽的文本字體統(tǒng)一設(shè)置成了肉眼可以接受的樣式
效果一樣，但是標簽表達的意思不一樣（語義）
表格
<表單
<按鈕
<圖表
<導航條
<分頁器
<彈框
https搭建圖書管理系統(tǒng)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body><nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">圖書管理系統(tǒng)</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">作者 <span class="sr-only">(current)</span></a></li><li><a href="#">關(guān)于我</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉有驚喜 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">驚喜1</a></li><li><a href="#">驚喜2</a></li><li><a href="#">驚喜3</a></li><li role="separator" class="divider"></li><li><a href="#">驚喜4</a></li><li role="separator" class="divider"></li><li><a href="#">驚喜5</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">提交</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">更多</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --> </nav><div class="container-fluid"><div class="row"><div class="col-lg-4"> <!--左面--><div class="list-group"><a href="#" class="list-group-item active">菜單</a><a href="#" class="list-group-item">圖書館列表</a><a href="#" class="list-group-item">圖書列表</a><a href="#" class="list-group-item">作者列表</a><a href="#" class="list-group-item">更多</a></div></div> <!--左面--><div class="col-lg-8"> <!--右面--><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">圖書管理系統(tǒng) <span class="glyphicon glyphicon-ok-sign pull-right"></span></h3></div><div class="panel-body"><div class="col-lg-6"><div class="input-group"><input type="text" class="form-control" placeholder="Search for..."><span class="input-group-btn"><button class="btn btn-default" type="button">搜索</button></span></div><!-- /input-group --></div><!-- /.col-lg-6 --><div class="col-lg-6"><button class="btn btn-info pull-right">添加</button></div></div><!-- /.row --><div><table class="table table-hover table-striped"><thead><tr><th>序號</th><th>書名</th><th>作者</th><th class="text-center">功能</th></tr></thead><tbody><tr><th>1</th><th>王者寶典</th><th>麻花疼</th><th class="text-center"><button class="btn btn-danger btn-xs">刪除</button><button class="btn btn-success btn-xs">編輯</button></th></tr></tbody></table><nav aria-label="Page navigation" class="text-center"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></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="#" aria-label="Next"><span aria-hidden="true">»</span></a></li></ul></nav></div></div></div></div> <!--右面--></div></div></body> </html>作業(yè)
""" 與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的.net bootstrap 下拉树状选择框_Bootstrap搭建图书管理系统的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： resnet50网络结构_Resnet5
- 下一篇： int数组初始化_Java中到底有没有多