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
Password
Close
Save changes
$('#myModal').modal({
backdrop:false,
keyboard: false
})
效果图如下:
5、Dashboard
html>
Dashboard Template for Bootstraparia-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
Go!
添加
#HeaderHeaderHeaderHeader
1,001Loremipsumdolorsit1,002ametconsecteturadipiscingelit1,003IntegernecodioPraesent1,003liberoSedcursusante1,004dapibusdiamSednisi1,005Nullaquissemat1,006nibhelementumimperdietDuis1,007sagittisipsumPraesentmauris1,008Fuscenectellussed«
- 1
- 2
- 3
- 4
- 5
»
aria-hidden="true">×
Modal title
Password
Close
Save changes
效果图如下: