當前位置：首頁 >

.net bootstrap 下拉树状选择框_Bootstrap搭建图书管理系统

發布時間：2025/3/15 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 .net bootstrap 下拉树状选择框_Bootstrap搭建图书管理系统小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

https://www.zhihu.com/video/1246932038927360000

每日測驗

"""

答案

昨日內容回顧

樣式類操作

""" addClass() classList.add() removeClass() hasClass() toggleClass() """

css操作

.css(屬性名,屬性值)jQuery鏈式操作一行代碼可以搞定很多事情jQuery對象在調用jQuery方法之后返回的還是當前對象本身(本質:return self)

位置操作

scrollTop scrollLeft # 回到頂部 $(window).scrollTop() # 獲取 $(window).scrollTop(300) # 設置

尺寸操作

# 文本的高和寬 height() # 文本+paddinginnerHeight() # 文本+padding+borderoutterHeight()

文本操作

""" .text() 文本 innerText() .html() 文本+標簽 innerHTML()括號內不加參數就是獲取加了就是設置 """ """ 獲取值 .val() value 獲取文件數據轉成標簽對象.files """

屬性操作

.attr() .attr('class') getAttribute .attr('class','c1') setAttribute .removeAttr() removeAttribute# 針對checkbox、radio、option選中的checked、selected屬性不要用attr 建議你使用prop()prop('checked')prop('checked',true/false)

文檔處理

# jQuery如何創建標簽 document.createElement('p') === $('<p>')A.append(B) B.appendTo(A)prepend() prependTo()...remove() 移除標簽 empty() 清空標簽內部所有的內容

事件處理

# jQuery兩種綁定事件的方式 # 第一種$('#d1').click(function(){}) # 第二種$('#d1').on('click',function(){})""" this指代的就是當前被操作對象本身(有點像面向對象的self) """ # 克隆事件clone() 默認情況下只克隆標簽和文本不克隆事件clone(true) # 自定義模態框綁定事件控制標簽類屬性的添加和刪除 # 左側菜單一行代碼搞定 # 返回頂部$(window).scroll(function(){}) # 自定義登陸校驗功能.val() # hover事件$('#d1').hover(function(){}) # 進出都會觸發$('#d1').hover(function(){},function(){}) # input框實時監控輸入內容事件$('#d1').on('input',function(){}) # 鍵盤按鍵事件$(window).keydown(function(event){event.keyCode })$(window).keyup(function(){})""" web領域永遠沒有絕對的安全！！！ """

今日內容概要

前端框架Bootstrap
手動搭建一個圖書管理系統頁面

今日內容詳細

前端框架Bootstrap

該框架已經幫你寫好了很多頁面樣式，你如果需要使用，只需要下載它對應文件，之后直接cv拷貝即可

在使用Bootstrap的時候所有的頁面樣式都只需要你通過class來調節即可

版本選擇建議使用v3版本：https://v3.bootcss.com/

注意

bootstrap的js代碼是依賴于jQuery的，也就意味著你在使用Bootstrap動態效果的時候，一定要導入jQuery

布局容器

柵格系統

柵格參數

排版

bootstrap將所有原生的HTML標簽的文本字體統一設置成了肉眼可以接受的樣式

效果一樣，但是標簽表達的意思不一樣（語義）

表格

表單

按鈕

圖表

導航條

分頁器

彈框

https

搭建圖書管理系統

<!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"><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="#">圖書管理系統</a></div><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="#">關于我</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></div> </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">圖書管理系統 <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></div><div class="col-lg-6"><button class="btn btn-info pull-right">添加</button></div></div><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>

作業

""" 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的.net bootstrap 下拉树状选择框_Bootstrap搭建图书管理系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： resnet50网络结构_Resnet5
下一篇： int数组初始化_Java中到底有没有多