前端框架Bootstrap的使用 - 蓝蓝设计_UI设计公司

前端框架Bootstrap的使用

2018-3-18 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里 

1. 下载Bootstrap

下载地址:https://v3.bootcss.com/ 
进入后下载这个标题的Bootstrap 
这里写图片描述 
下载完成后,将所需的css,js复制到工程中即可

2. 拷贝官方的模块文件

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好,世界!</h1> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

3. 页面添加组件

图片

  • 下面一个按钮为例:

    • 喜欢的样式
<button type="button" class="btn btn-primary">(首选项)Primary</button>
	
  • 1

这里写图片描述

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
	
  • 1
  • 2
  • 3
  • 4
  • 5

这里写图片描述 
然后将二者结合即可:

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>
	
  • 1
  • 2
  • 3
  • 4
  • 5
- 最后的结果如下:
Left Middle Right

这里写图片描述

至此你就可以简单的用前端框架做出美观的界面了!

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: 前端框架Bootstrap的使用


Powered by emlog 京ICP备12006971号-1 sitemap