iT邦幫忙

0

bootstrap 相關問題

是這樣的最近在學前端語言,今天有個功課如下圖
https://ithelp.ithome.com.tw/upload/images/20180621/20110132lyGem6np0d.jpg

然後聽說前端可用bootstrap,所以我也弄一個來試試看
最後如下圖
https://ithelp.ithome.com.tw/upload/images/20180621/20110132KkVUwkBmQJ.jpg

我想請問是雖然這個比較美觀,可是他旁邊的框框卻好像不見了,我該如何設定?
然後字體怎麼置中?雖然我有看文件,但還是看不太懂,希望能為我解惑一下,謝謝。
以下是我的程式碼

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <title>餓死抬頭</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
        <table class="table table-bordered">
                <h2>
                        <p class="text-center">標題:模擬課表</p>
                </h2>
                <tr>
                        <th>節次/星期</th>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                        <th>星期四</th>
                        <th>星期五</th>
                </tr>
                <tr>
                        <td>第一節</td>
                        <td rowspan="2">通識教育</td>
                        <td></td>
                        <td></td>
                        <td rowspan="3">微積分</td>
                        <td rowspan="3"></td>
                </tr>
                <tr>
                        <td>第二節</td>
                        <td rowspan="2">離散數學</td>
                        <td rowspan="2">英文(一)</td>
                </tr>
                <tr>
                        <td>第三節</td>
                        <td></td>
                </tr>
                <tr>
                        <td>第四節</td>
                        <td></td>
                        <td rowspan="2">體育(一)</td>
                        <td rowspan="3">計算機概論</td>
                        <td rowspan="3">數位邏輯設計</td>
                        <td></td>
                </tr>
                <tr>
                        <td>第五節</td>
                        <td></td>
                        <td></td>
                </tr>
                <tr>
                        <td>第六節</td>
                        <td></td>
                        <td></td>
                        <td rowspan="2">韻律教學法</td>
                </tr>
                <tr>
                        <td>第七節</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                </tr>
        </table>
</body>

</html>
Homura iT邦高手 1 級 ‧ 2018-06-21 15:54:09 檢舉
置中你的標題不就有用...
class="text-center"
tenno081 iT邦研究生 4 級 ‧ 2018-06-21 15:57:02 檢舉
阿沒有啦,紫色框框那個是沒bootstrap版本的,我PO的是有bootstrap的
這個是預設的風格樣式。
算是勉強有表格的感覺。

https://getbootstrap.com/docs/4.0/content/tables/
這裏有說明一些基本的風格處理。
設定到class上去就會幫你展現。

如要特規的樣式,你就得自行處理了。
bootstrap只是幫你做基本的工作。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
最佳解答

旁邊框框看不到,應該是表格預設100%寬度,到了瀏覽器邊界看不到,
可以試著把表格寬度改小看看。
另外可以寫css去控制自己想要的效果:

<style>
body{
	margin:0 auto;
}

table{
	width:800px;
}

table tr td{
	text-align: center;
}
</style>
看更多先前的回應...收起先前的回應...

其實他已在用bootstrap了。
正常來說,並不太適合用原始元件名稱去強制定義會比較好。
免得跟bootstrap整個衝突混合運行。
他會更搞不懂的。

這是最簡單的作法,沒什麼衝突問題,
拿掉自訂的css就會還原了,
初學者不需要去考慮搞不搞懂bootstrap,
要搞懂至少對css要有一定程度的經驗,
看他的問題,就知道你想太多了
一開始能用能跑才更重要,
經驗需要再慢慢從錯誤中學習,
不這樣不可能真正搞懂,
只要真的從頭學習的人,
就會很清楚每個階段的學習者,
真正需要的是什麼~
/images/emoticon/emoticon10.gif

Homura iT邦高手 1 級 ‧ 2018-06-22 17:05:05 檢舉

所以應該叫他先弄懂基本的css
再來用bootstrap!
不然想做什麼微調都不會XD

回答只是針對他現在的問題,
真要扯的話,沒完沒了的

Homura iT邦高手 1 級 ‧ 2018-06-22 17:35:50 檢舉

kksugsay
很同意你說的
有時候幫對方想那麼多
對方不一定需要用到...

tenno081 iT邦研究生 4 級 ‧ 2018-06-24 21:06:22 檢舉

一段時間沒回來看,突然這麼多回答,讓我有點嚇到,只是好奇而已啦!

我也才剛開始學CSS,只是有人跟我提到這個我就好奇用一下,畢竟我這

個是用wc3school的範例,為什麼範例上的是正常顯示,怎麼我複製下來

就有這個問題,所以才上來問。

tenno081 iT邦研究生 4 級 ‧ 2018-06-24 21:20:49 檢舉

不知道我能否再請問關於margin的部分?

.header{
  width:700px;
  height:150px;
  background-color:#ccc;
  margin-left: 50px;
}

我打這個CSS碼並呼叫畫面是這樣
https://ithelp.ithome.com.tw/upload/images/20180624/20110132M9C9fyUcy8.jpg

那我看教學是說這樣打

margin: 50px 50px 50px 50px;

分別代表上左下右,可以少打很多行,可是我打

margin: 0px 50px 0px 0px;

https://ithelp.ithome.com.tw/upload/images/20180624/20110132iU4pFyydVw.jpg

卻沒有往右邊移動,變成說我要打成右邊才有反應,請問是我記錯嗎?

真正的程式設計師,時間感受跟一般人不同,這年頭時間就是金錢,margin簡寫是代表上右下左喔,麻煩沒問題就結案吧~
/images/emoticon/emoticon06.gif

tenno081 iT邦研究生 4 級 ‧ 2018-06-25 08:45:22 檢舉

感謝解答

我要發表回答

立即登入回答