好好学习：试试Bootstrap实战课程 by oflyhigh

View this thread on: hive.blog | peakd.com | ecency.com

cn · @oflyhigh · Nov 1 '18

$24.72

好好学习：试试Bootstrap实战课程

最近尝试用PHP弄几个简单的网页，突然发现自己几十年前学的知识和技能有点跟不上时代的发展了，就说页面的UI吧，现在都用什么Bootstrap，除了美观以外，在手机等移动设备上看起来也更舒服。

我粗略的了解了一下Bootstrap，学会了比如弄个响应式表格啊、设置字体颜色、但是布局啥的还是不甚了解，所以做个简单堆叠数据的表格尚能应付，复杂一点效果是做不出来了。

为了让自己弄的页面更顺眼，我决定继续好好学习，在搜索的过程中发现了[w3cschool.cn](https://www.w3cschool.cn)上的[编程实战列表 ](https://www.w3cschool.cn/codecamp)里边有诸多好玩的内容。

![](https://cdn.steemitimages.com/DQmUM2k9UyidmzSmH3F8Qbg81dt6khuQCwkz66YnQrvca9j/image.png)

我当然先试试[Bootstrap实战](https://www.w3cschool.cn/codecamp/list?pename=responsive_design_with_bootstrap_camp)
>![](https://cdn.steemitimages.com/DQmVhifCAbAve6NSL84A23VrSHgH37zjdUxc9aqsWnFnmfs/image.png)

看起来还很复杂呢，竟然需要5个小时，于是开工开搞，结果用了不到一个小时就全部通过
>![](https://cdn.steemitimages.com/DQmPsDic5qKKUcciivvSmBk29H4DLstryJHBKYmzBWUNz2Y/image.png)

尽管这个挑战很简单，但是它这个方式挺有意思，左侧出题，右侧给你一堆代码，你在这基础上去改动，改好了以后提交答案，如果改动无误，就会弹出挑战成功的页面，并可以进入下一关，比枯燥的学习好多了。
>![](https://cdn.steemitimages.com/DQmSF9RCfRjLJfG3xrVfcw8pgXGa7S6P8rqQhAPnmPwAMb6/image.png)

尽管31关涉及的内容不是很多很全面，但是依旧学到了很多东西，尤其是对Bootstrap布局有了一点新的了解，回头可以继续去改我的网页了。

----
<center><strong>Vote For Me As Witness</strong>
https://steemit.com/~witnesses type in **`oflyhigh`** and click ***`VOTE`***
[![](https://cdn.steemitimages.com/DQmX5NysqT44FBa3bhuWqQ69nAbseu8Nt5YQPn2pYejPVxA/image.png)](https://steemit.com/~witnesses)
[Vote @oflyhigh via Steemconnect](https://steemconnect.com/sign/account-witness-vote?witness=oflyhigh&approve=1)
<strong>Thank you!</strong></center>

👍 adm, oflyhigh, rea, newhope, deanliu, ripperone, somebody, helene, xiaohui, ace108, chinadaily, ethansteem, bxt, lalala, herpetologyguy, magicmonk, blackbunny, midnightoil, mark-waser, exec, lingfei, weavingwords, digital-wisdom, kingofdew, fr3eze, thecryptodrive, laoyao, lydiachan, cryptohustler, jwaser, steemchoose, bobdos, catchawhale, whitebot, mrliga, ethical-ai, windowglass, yulan, strong-ai, technoprogressiv, aafeng, asterix87, walkinharmony, jiangchen, aabb, canbethisone, nfc, peterschilder, jameslashomb, lkvictor2005, bwaser, teamcn-shop, davidjkelley, ebejammin, dappchaser, lancy, blockchainbilly, julian2013, chann, ethanlee, speeding, fredo77200, kelvinzhang, winniex, and 73 others

`author`	oflyhigh
`permlink`	bootstrap
`category`	cn
`json_metadata`	{"tags":["cn","life","ui","bootstrap","html"],"image":["https://cdn.steemitimages.com/DQmUM2k9UyidmzSmH3F8Qbg81dt6khuQCwkz66YnQrvca9j/image.png","https://cdn.steemitimages.com/DQmVhifCAbAve6NSL84A23VrSHgH37zjdUxc9aqsWnFnmfs/image.png","https://cdn.steemitimages.com/DQmPsDic5qKKUcciivvSmBk29H4DLstryJHBKYmzBWUNz2Y/image.png","https://cdn.steemitimages.com/DQmSF9RCfRjLJfG3xrVfcw8pgXGa7S6P8rqQhAPnmPwAMb6/image.png","https://cdn.steemitimages.com/DQmX5NysqT44FBa3bhuWqQ69nAbseu8Nt5YQPn2pYejPVxA/image.png"],"links":["https://www.w3cschool.cn","https://www.w3cschool.cn/codecamp","https://www.w3cschool.cn/codecamp/list?pename=responsive_design_with_bootstrap_camp","https://steemit.com/~witnesses","https://steemconnect.com/sign/account-witness-vote?witness=oflyhigh&approve=1"],"app":"steemit/0.1","format":"markdown"}
`created`	2018-11-01 23:13:45
`last_update`	2018-11-01 23:13:45
`depth`	0
`children`	10
`last_payout`	2018-11-08 23:13:45
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	18.898 HBD
`curator_payout_value`	5.823 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	1,411
`author_reputation`	6,273,591,378,685,830
`root_title`	好好学习：试试Bootstrap实战课程
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	74,506,512
`net_rshares`	22,011,132,759,372
`author_curate_reward`	""

properties (23)vote details (137)

voter	rshares	pct
adm	5,640,102,039,996	30%
thecryptodrive	42,007,897,160	25%
wongshiying	101,613,850	100%
mark-waser	130,234,967,818	100%
blockchainbilly	4,397,706,085	50%
deanliu	1,550,029,484,306	100%
rea	2,430,216,525,878	100%
ace108	345,574,998,989	25%
magicmonk	163,018,900,016	100%
laoyao	37,285,038,516	100%
somebody	1,383,941,762,619	100%
midnightoil	134,920,829,172	100%
xiaohui	752,053,626,731	100%
silentlucidity53	0	75%
oflyhigh	2,551,372,524,225	100%
xiaokongcom	203,838,939	100%
yulan	15,835,322,869	100%
chinadaily	201,355,261,394	100%
helene	928,505,321,070	100%
ethansteem	200,317,412,017	100%
davidjkelley	6,028,043,615	100%
digital-wisdom	54,511,495,561	100%
ethical-ai	17,879,534,932	100%
jwaser	29,213,464,046	100%
bwaser	6,941,464,872	100%
jianghao	181,676,029	10%
ellepdub	1,841,527,288	100%
herpetologyguy	164,648,725,167	100%
handyman	124,451,615	100%
strong-ai	15,174,565,390	100%
steemtruth	3,004,062,602	10%
wanwenguo	535,724,445	100%
lalala	179,922,744,921	100%
devilwsy	2,355,587,112	100%
janiceting	2,344,896,296	100%
lydiachan	34,171,507,895	100%
technoprogressiv	14,833,970,449	100%
newhope	2,401,848,674,937	29%
blackbunny	141,725,343,235	100%
ripperone	1,543,192,493,804	31%
bxt	194,757,955,929	100%
lingfei	69,884,837,919	100%
yyyy	428,105,197	100%
austinsandersco	721,059,458	70%
kingofdew	44,870,071,560	100%
passion-fruit	3,078,893,968	30%
fortune-master	3,070,091,249	30%
frankintaiwan	0	10%
wylo	555,800,896	100%
jkkim	25,285,587	10%
ebejammin	5,998,854,479	100%
jassennessaj	2,171,717,219	10%
cryptohustler	29,652,572,165	100%
traindriver	553,767,583	100%
exec	93,048,133,429	100%
eval	796,840,238	100%
catchawhale	21,725,331,719	20%
speeding	3,661,280,042	100%
jameslashomb	8,847,539,867	100%
walkinharmony	13,161,890,095	40%
asterix87	13,934,383,705	100%
canbethisone	11,879,858,194	50%
abetterworld	2,852,291,297	100%
raili	1,767,883,650	90%
that1consultant	252,556,455	100%
sanzo	304,289,081	100%
davaowhenyo	546,591,430	100%
allenshayzar	546,587,220	100%
raku	559,061,898	100%
resteeming	556,739,354	100%
ravenousappetite	546,587,220	100%
aabb	12,227,459,384	100%
auntigormint	487,652,273	100%
mrliga	19,183,666,644	100%
sweethoney	234,120,911	100%
liangfengyouren	1,574,383,959	50%
hassanabid	1,730,470,995	20%
jiangchen	13,029,354,942	100%
lancy	4,579,658,032	92%
fr3eze	44,199,146,080	33.75%
aafeng	14,336,430,055	20%
bearpaw	52,725,040	100%
freedom-fighter	556,343,454	100%
technologynepal	559,061,898	100%
chenlocus	1,252,393,993	40%
dgorbunov	512,835,324	100%
khalilad	557,193,055	100%
ms8988	552,893,998	100%
espoem	1,688,270,283	1%
xiaoshancun	251,641,940	100%
stakuza	345,246,478	100%
holmesian	194,942,022	100%
ikonik	343,531,738	100%
vfxness	16,294,947	100%
lemminon	557,193,055	100%
bobdos	21,755,962,396	50%
heyeshuang	604,114,763	100%
peterschilder	8,898,648,584	70%
razor80	555,770,374	100%
fastiduos	545,809,197	100%
winniex	3,521,565,807	10%
rebecca80	148,716,191	100%
weavingwords	60,048,334,170	100%
nitro.live	275,101,182	100%
huatanzhang	1,779,862,004	100%
chaerin	163,500,071	100%
windowglass	17,128,056,982	50%
chann	3,780,644,049	20%
coindzs	144,363,256	100%
ewq	79,233,117	3%
historylover	1,011,461,433	100%
btccurrency1	59,130,481	100%
ethanlee	3,691,487,039	100%
fredo77200	3,607,801,995	100%
fanso	1,596,895,631	100%
cryptoknight27	556,954,377	100%
let-it-fly	3,416,582,007	100%
hepeng.chn	97,372,378	100%
angelinafx	1,344,957,464	1%
jiahua	616,197,903	100%
merlion	999,169,016	1%
shine.wong	791,980,683	47%
alijewel	534,551,567	100%
steemchoose	28,147,896,068	2.1%
julian2013	4,140,913,665	10%
slientstorm	1,438,442,703	100%
lkvictor2005	7,394,635,394	100%
teamcn-shop	6,259,271,640	20%
ygrj	988,915,630	50%
dappchaser	5,684,587,536	100%
nfc	11,747,047,465	1%
kelvinzhang	3,566,470,693	100%
starrouge	2,238,462,965	100%
sskiller	76,982,641	30%
steemall	77,168,267	30%
whitebot	19,473,782,868	1%
afiqabruzzi	409,163,256	100%

@fr3eze · Nov 2 '18

$0.06

这个网站都走例子教学路线，我个人很喜欢。

Posted using [Partiko Android](https://steemit.com/@partiko-android)

👍 oflyhigh

`author`	fr3eze
`permlink`	fr3eze-re-oflyhigh-bootstrap-20181102t024218694z
`category`	cn
`json_metadata`	{"app":"partiko"}
`created`	2018-11-02 02:42:18
`last_update`	2018-11-02 02:42:18
`depth`	1
`children`	1
`last_payout`	2018-11-09 02:42:18
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.043 HBD
`curator_payout_value`	0.014 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	90
`author_reputation`	62,201,653,753,684
`root_title`	好好学习：试试Bootstrap实战课程
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	74,515,258
`net_rshares`	50,315,957,127
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
oflyhigh	0 B		50,315,957,127	2%

@oflyhigh · Nov 3 '18

英雄所见略同

properties (22)

`author`	oflyhigh
`permlink`	re-fr3eze-fr3eze-re-oflyhigh-bootstrap-20181103t020653918z
`category`	cn
`json_metadata`	{"tags":["cn"],"app":"steemit/0.1"}
`created`	2018-11-03 02:06:57
`last_update`	2018-11-03 02:06:57
`depth`	2
`children`	0
`last_payout`	2018-11-10 02:06:57
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	6
`author_reputation`	6,273,591,378,685,830
`root_title`	好好学习：试试Bootstrap实战课程
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	74,576,608
`net_rshares`	0

@kelvinzhang · Nov 1 '18

$0.06

不错的介绍，我也正向我的team推荐使用，最重要的是用它来实现给用户提供自定义的布局和页面内容。

Posted using [Partiko Android](https://steemit.com/@partiko-android)

👍 oflyhigh

`author`	kelvinzhang
`permlink`	kelvinzhang-re-oflyhigh-bootstrap-20181101t235420102z
`category`	cn
`json_metadata`	{"app":"partiko"}
`created`	2018-11-01 23:54:21
`last_update`	2018-11-01 23:54:21
`depth`	1
`children`	0
`last_payout`	2018-11-08 23:54:21
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.042 HBD
`curator_payout_value`	0.013 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	118
`author_reputation`	1,659,906,059,997
`root_title`	好好学习：试试Bootstrap实战课程
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	74,508,156
`net_rshares`	49,088,661,327
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
oflyhigh	0 B		49,088,661,327	2%

@kirato · Nov 2 '18

$0.24

Bootstrap是html+css的framework 嗎？
第一次聽到這東西

Posted using [Partiko iOS](https://steemit.com/@partiko-ios)

👍 sleepagent, oflyhigh

`author`	kirato
`permlink`	kirato-re-oflyhigh-bootstrap-20181102t150958324z
`category`	cn
`json_metadata`	{"app":"partiko"}
`created`	2018-11-02 15:09:57
`last_update`	2018-11-02 15:09:57
`depth`	1
`children`	2
`last_payout`	2018-11-09 15:09:57
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.184 HBD
`curator_payout_value`	0.060 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	102
`author_reputation`	38,636,263,090,516
`root_title`	好好学习：试试Bootstrap实战课程
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	74,548,465
`net_rshares`	212,894,165,060
`author_curate_reward`	""

properties (23)vote details (2)

voter	weight	wgt%	rshares	pct	time
oflyhigh	0 B		50,281,690,904	2%
sleepagent	0 B		162,612,474,156	100%

@oflyhigh · Nov 3 '18

好像用得挺广泛的

properties (22)

`author`	oflyhigh
`permlink`	re-kirato-kirato-re-oflyhigh-bootstrap-20181103t020733124z
`category`	cn
`json_metadata`	{"tags":["cn"],"app":"steemit/0.1"}
`created`	2018-11-03 02:07:36
`last_update`	2018-11-03 02:07:36
`depth`	2
`children`	0
`last_payout`	2018-11-10 02:07:36
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	8
`author_reputation`	6,273,591,378,685,830
`root_title`	好好学习：试试Bootstrap实战课程
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	74,576,631
`net_rshares`	0

@sleepagent · Nov 4 '18

Thank you for using @sleepagent bid bot serves.
This post has received a 100 % upvote from @sleepagent.

properties (22)

`author`	sleepagent
`permlink`	re-kirato-1541373161959
`category`	cn
`json_metadata`	{}
`created`	2018-11-04 23:13:48
`last_update`	2018-11-04 23:13:48
`depth`	2
`children`	0
`last_payout`	2018-11-11 23:13:48
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	103
`author_reputation`	-16,169,076,691
`root_title`	好好学习：试试Bootstrap实战课程
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	74,687,190
`net_rshares`	0

@magicmonk · Nov 3 '18

$0.06

love bootstrap :)

👍 oflyhigh

`author`	magicmonk
`permlink`	re-oflyhigh-bootstrap-20181103t070049165z
`category`	cn
`json_metadata`	{"tags":["cn"],"app":"steemit/0.1"}
`created`	2018-11-03 07:00:54
`last_update`	2018-11-03 07:00:54
`depth`	1
`children`	0
`last_payout`	2018-11-10 07:00:54
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.043 HBD
`curator_payout_value`	0.014 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	17
`author_reputation`	1,097,114,720,910,653
`root_title`	好好学习：试试Bootstrap实战课程
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	74,586,399
`net_rshares`	49,985,476,337
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
oflyhigh	0 B		49,985,476,337	2%

@minloulou · Nov 2 '18

$0.06

@teamcn-shop

👍 oflyhigh

`author`	minloulou
`permlink`	re-oflyhigh-bootstrap-20181102t072621208z
`category`	cn
`json_metadata`	{"tags":["cn"],"community":"steempeak","app":"steempeak"}
`created`	2018-11-02 07:26:24
`last_update`	2018-11-02 07:26:24
`depth`	1
`children`	0
`last_payout`	2018-11-09 07:26:24
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.043 HBD
`curator_payout_value`	0.014 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	12
`author_reputation`	26,302,127,547,157
`root_title`	好好学习：试试Bootstrap实战课程
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	74,526,219
`net_rshares`	50,297,199,753
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
oflyhigh	0 B		50,297,199,753	2%

@shine.wong · Nov 5 '18

不错，收了~

properties (22)

`author`	shine.wong
`permlink`	re-oflyhigh-bootstrap-20181105t024915577z
`category`	cn
`json_metadata`	{"tags":["cn"],"community":"steempeak","app":"steempeak"}
`created`	2018-11-05 02:49:18
`last_update`	2018-11-05 02:49:18
`depth`	1
`children`	0
`last_payout`	2018-11-12 02:49:18
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	6
`author_reputation`	1,329,335,530,903
`root_title`	好好学习：试试Bootstrap实战课程
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	74,695,374
`net_rshares`	0

@teamcn-shop · Nov 2 '18

@minloulou给您叫了一份外卖！

由 @ygrj 阿洁 迎着大雪 骑着皮皮虾给您送来
**新鲜出炉的炸芋头片** <br> ![](https://cdn.steemitimages.com/DQmc7shDFrDkx4qy8t8yMn2UhsgK8GuesRdkhpHeX59Cmk5/IMG20181010162925.jpg)
如果您对我的服务满意，请不要吝啬您的点赞～

properties (22)