Bootstrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目

下载网址 http://v3.bootcss.com/

bootstrap文件的目录结构

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

在网页中配置Bootstrap



  
    
    
    
    
    Bootstrap 101 Template
    
    
  
  
    
      
        
          
          Project name
        
        
          
            Home
            About
            Contact


viewport:视口
width:可视区域的宽度，值可为数字或关键词device-width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上
user-scalable:是否可对页面进行缩放，no 禁止缩放

组件的使用

图标
一般使用行内标签或者加载图标
在标签设置class ,将图标名设置为class值即可
可以改变图片的颜色和大小

按钮
可作为按钮使用的标签或元素为、
改变按钮的尺寸
.btn-lg(大)、.btn-sm(中) 或 .btn-xs(小)

size.png

设置,，但是建议使用
按钮组
通过按钮组容器把一组按钮放在同一行里

按钮工具栏
把一组
组合进一个
中就可以做成更复杂的组件

下拉菜单：将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里

Action Another action Something else here Separated link

输入框组
通过在文本输入框前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。

默认宽度与父标签或浏览器相同，可以重新设置 @ @example.com

也可以嵌入图标

用户名

轮播图

Previous Next

导航：Bootstrap 中的导航组件都依赖同一个 .nav 类

Home Profile Messages

Home Profile Messages

导航嵌入下拉菜单

Home Profile Dropdown Action Another action Something else here Separated link

Bootstrap

组件的使用

你可能感兴趣的:(Bootstrap)