Bootstrap的使用

我就是我 2022-09-23 11:56 93阅读 0赞

1.Bootstrap 简介  
  
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。  
特点：  
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式  
浏览器支持：所有的主流浏览器都支持 Bootstrap。  
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。  
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。  
它为开发人员创建接口提供了一个简洁统一的解决方案，还包含了功能强大的内置组件，易于定制，它还提供了基于 Web 的定制，并且它是开源的  
  
2.Bootstrap使用：  
  
今天主要学习了Bootstrap网格化和导航条表单按钮等组件的使用  
首先：HTML5 的文档类型：  
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。  
格式如下：<!DOCTYPE html> <html lang="zh-CN"> ... </html>  
然后因为Bootstrap移动设备优先，所以为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签：

布局容器:  
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器,在Bootstrap有两个作此用处的类，不过要注意区分它们的不同，另外还需注意这两种 容器类不能互相嵌套  
其中：.container 类用于固定宽度并支持响应式布局的容器。

<div class="container"> ... </div>
    .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
    <div class="container-fluid"> ... </div>

栅格系统：  
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。  
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。  
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）  
通过“行（row）”在水平方向创建一组“列（column）”  
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。  
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局  
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。  
具体使用可到Bootstrap中文网查看API  
   
Bootstrap的组件：  
Glyphicons 字体图标:使用Glyphicons 字体图标需注意：图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。而且图标类只能应用在不包含任何文本内容或子元素的元素上。  
Bootstrap 假定所有的图标字体文件全部位于 ../fonts/ 目录内，相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置，那么，你需要通过下面列出的任何一种方式来更新 CSS 文件：  
在 Less 源码文件中修改 @icon-font-path 和/或 @icon-font-name 变量。  
利用 Less 编译器提供的 相对 URL 地址选项。  
修改预编译 CSS 文件中的 url() 地址。  
当然我们最好不要修改了图标字体文件的位置。  
例如：我的图标的一个应用：  
<span class="glyphicon glyphicon-search"></span>  
下拉菜单用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。  
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown 
        <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
    </div>

你还可以改变上面代码的第一行的class为：dropup这样菜单会向上弹出  
对齐：默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。  
添加标题：在下拉菜单中均可通过添加标题来标明一组动作。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3"> ... 
    <li class="dropdown-header">Dropdown header</li> ... 
        
    </ul>

还有很多很多的组件可以到Bootstrap中文网查阅  
h t t p://w w w.bootcss.com/