今天給各位分享bootstrap登錄頁(yè)面模板的知識(shí)，其中也會(huì)對(duì)bootstrap用戶注冊(cè)登錄模板進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、bootstrap怎么設(shè)置登錄界面
• 2、怎么用bootstrap設(shè)計(jì)一個(gè)登陸頁(yè)面
• 3、如何修改bootstrap模板，要實(shí)實(shí)在在的步驟，

bootstrap怎么設(shè)置登錄界面

bootstrap框架登陸頁(yè)面

div class="container" style="margin-top:100px"

form action="login.jspx" method="post" class="well" style="width:220px;margin:0px auto;"

h3系統(tǒng)登錄/h3

%

String code = request.getParameter("code");

if(code != null "10001".equals(code)){

%

div style="color:red;font-size:18px"用戶名或密碼錯(cuò)誤/div

%} else if(code != null "10002".equals(code)) { %

div style="color:red;font-size:18px"請(qǐng)輸入用戶名或密碼/div

%} else if(code != null "10005".equals(code)) {%

div style="color:red;font-size:18px"請(qǐng)先登錄/div

%} %

label用戶名:/label

input type="text" name="username" style="height:30px"class="span3"/

label密碼：/label

input type="password" name="password" style="height:30px" class="span3"

button type="submit" class="btn btn-primary"登陸系統(tǒng)/button

/form

/div

怎么用bootstrap設(shè)計(jì)一個(gè)登陸頁(yè)面

看一下具體的代碼. 這里需要注意的是, 那個(gè)模版, 是在系列教程一中.

class="container" 讓頁(yè)面能夠做到居中.注意該標(biāo)簽不能嵌套使用.

role屬性是html5中新增的一個(gè)屬性,可以讓你更好的自定義一些屬性供你使用.

class="form-control" 該標(biāo)簽是把一些表達(dá)標(biāo)簽的width都設(shè)置為100%.

其中btn是bootstrap中默認(rèn)定義的一個(gè)button也就是按鈕的樣式.

其中btn-lg是指最大的樣式.還有btn-xs, btn-sm, btn-md. 分別對(duì)應(yīng)不同的設(shè)備. 手機(jī), 平板, pc等.

這里又重新寫了2個(gè)樣式, 一個(gè)是表單的最大width. 設(shè)置成了330px.是因?yàn)榈卿洸恍枰^(guò)寬, 要不然不太好看. 第二個(gè)樣式, 是因?yàn)樵谀J(rèn)的btn-lg是占一行, 所以, 就會(huì)把兩個(gè)表單文本框放在各自的行上. 但是緊挨著太狠. 所以, 做了一個(gè)3px的下間距.

不同的btn大小展示, 從圖就可以看出來(lái)這幾個(gè)的區(qū)別. 怎么試用? 你動(dòng)手做一下就明白了.

如何修改bootstrap模板，要實(shí)實(shí)在在的步驟，

用amaze ui

也是基于bootstrap的UI。比bootstrap功能多，樣式好看，一整套中文教程還有模板案例。

至于你一定要說(shuō)修改bootstrap模板

1：下載模板

2：用谷歌瀏覽器打開index.html（一般都有這個(gè)頁(yè)面）

3：用谷歌瀏覽器調(diào)試（F12），選中要修改的元素。在調(diào)試框右邊修改樣式。修改好了。就將這個(gè)樣式單獨(dú)寫一個(gè)class賦值上去

關(guān)于bootstrap登錄頁(yè)面模板和bootstrap用戶注冊(cè)登錄模板的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。