隨著各種手持設備的出現,要想讓你的Web頁面適合千羅萬像的設備瀏覽,響應式設計的呼聲越來越高。在Bootstrap中也為表格提供了響應式的效果,將其稱為響應式表格。
Bootstrap提供了一個容器,并且此容器設置類名“.table-responsive”,此容器就具有響應式效果,然后將<table class="table">置于這個容器當中,這樣表格也就具有響應式效果。
Bootstrap中響應式表格效果表現為:當你的瀏覽器可視區域小于768px時,表格底部會出現水平滾動條。當你的瀏覽器可視區域大于768px時,表格底部水平滾動條就會消失。示例如下:
<div class="table-responsive"> <table class="table table-bordered"> … </table> </div>
運行效果如下:
(寬屏效果)
(窄屏效果)
本小節沒有代碼任務,單擊“提交”按鈕進行下一個小節學習。
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報