linux bootstrap,Bootstrap示例

Bootstrap的实例

先在网站上找到需要的示例模板下载下来

https://v3.bootcss.com/getting-started/#examples

在所需要的模板页右击------>另存为(选择网页全部)------>保存

会保存为一个html页面和一个相同名字的文件夹，文件夹存放的是相关样式文件，将其全部拷贝到我们的项目里面

别的模板网站地址：adminLTE

https://adminlte.io/

1、示例一：登录注册html>

登录注册示例

body {

background-color: #eee;

}

请登录

邮箱

密码

记住我

登录

效果图如下：

2、示例二：导航条

html>

导航条示例

data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

Toggle navigation

Brand

• Link (current)
• Link

• aria-expanded="false">Dropdown 

  • Action
  • Another action
  • Something else here
  • Separated link
  • One more separated link

• Link

• aria-expanded="false">Dropdown 

  • Action
  • Another action
  • Something else here
  • Separated link

效果图如下：

3、示例三：轮播图动态循环

html>

轮播图示例

                

Bootstrap-海阔天空！

                

Bootstrap-最美黄昏！

                

Bootstrap-自然力量！

Previous

Next

$('.carousel').carousel({

interval: 3000

})

注意：轮播图用到的相片必须是一样大小，否则可能不会出现轮播效果

4、示例四：模态框

html>

模态框示例

点我弹出！

aria-hidden="true">×

Modal title

Email

Password

Close

Save changes

$('#myModal').modal({

backdrop:false,

keyboard: false

})

效果图如下：

5、Dashboard

html>

Dashboard Template for Bootstrap

aria-expanded="false" aria-controls="navbar">

Toggle navigation

Project name

• Dashboard
• Settings
• Profile
• Help

• Overview (current)
• Reports
• Analytics
• Export

• Nav item
• Nav item again
• One more nav
• Another nav item
• More navigation

• Nav item again
• One more nav
• Another nav item

Panel heading without title

Go!

添加

#HeaderHeaderHeaderHeader

1,001Loremipsumdolorsit1,002ametconsecteturadipiscingelit1,003IntegernecodioPraesent1,003liberoSedcursusante1,004dapibusdiamSednisi1,005Nullaquissemat1,006nibhelementumimperdietDuis1,007sagittisipsumPraesentmauris1,008Fuscenectellussed

• «

• 1
• 2
• 3
• 4
• 5

• »

aria-hidden="true">×

Modal title

Email

Password

Close

Save changes

效果图如下：