Bootstrap前端框架

青旅半醒 2022-06-13 14:21 228阅读 0赞

# Bootstrap #

前端小白，关于前端的都学学，有砖轻拍~

> Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是一个基于 HTML、CSS、JavaScript 的开源框架，它简洁灵活，可用于快速、简单地构建基于PC及移动端设备的Web页面需求。 Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。 Bootstrap最为重要的部分就是它的响应式布局，通过这种布局可以兼容PC端，PAD以及手机移动端的页面访问。

**特点**

*  跨设备、跨浏览器：可以兼容所有现代浏览器，包括比较诟病的IE7、8
 *  响应式布局：支持PC端各种分辨率的显示，还支持移动端PAD、手机等屏幕的响应式切换显示
 *  提供全面的开发组件：导航、标签、工具条、按钮等一系列组件，方便开发者使用
 *  内置jQuery插件：方便开发者实现Web中各种常规特效
 *  支持HTML5、CSS3
 *  支持LESS动态样式

## **Bootstrap结构** ##

主要分为三大核心目录：CSS(样式)、js(脚本)、fonts(字体).

*  css目录中有四个css后缀的文件，其中包含min字样的是压缩版本，一般使用这个；不包含的属于没有压缩的；map后缀的文件则是CSS源码映射表，在一些特定的浏览器工具中使用。
 *  JS目录包含两个文件，是未压缩和压缩的JS文件
 *  fonts目录中包含了不同后缀的字体文件

创建第一个页面

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>BootStrap Test</title>
        <link rel="stylesheet" href="../css/bootstrap.min.css">
    </head>
    <body style="margin:50px;">
    <p>Bootstrap框架</p>
    <samp>This is output.</samp>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    </body>
    </html>

--------------------

## 页面布局 ##

> 1.有序类表/无序列表：成为导航栏，只需引入一下类

<ul class="list-unstyled list-inline">
        <li>Bootstrap框架</li>
        <li>Bootstrap框架</li>
        <li>Bootstrap框架</li>
        <li>Bootstrap框架</li>
    </ul>

> 2.页面上的代码片/按键提示

<code><section></code>
    press <kbd>ctrl+,</kbd>

--------------------

## 表格 ##

> 1.基本表格样式：引入类class=”table”即可

> 2.条纹状表格：让tbody里的行产生一行隔一行加单色背景的效果

> 3.带边框的表格：

> 4.悬停鼠标

> 5.状态类：可以单独设置每一行的背景样式

> 6.隐藏某一行

> 7.响应式表格：表格父元素设置响应式，小于768px时出现边框

--------------------

## 按钮 ##

> 1.可做为按钮使用的标签或元素—>转化为普通按钮

<a href="###" class="btn btn-default">Link</a>
    <input type="button" class="btn btn-default" value="input">
    <button class="btn btn-default">Button</button>

\*1.虽然按钮类可以应用到a和button元素上，但是，导航和导航条组件只支持button元素  
2.如果a元素被作为按钮使用，并用于在当前页面出发某些功能，而不是用于链接其他页面或者当前页面中的其他部分，那么，务必设置role=”button”属性  
3.跨浏览器展现，强烈建议尽可能使用button元素来获得在各个浏览器上获得相匹配的绘制效果\*

> 2.预定义样式

*  btn-default 默认样式
 *  btn-success 成功样式
 *  btn-info 一般信息样式
 *  btn-warning 警告样式
 *  btn-danger 危险样式
 *  btn-primary 首选样式
 *  btn-link 链接样式

<button class="btn btn-info">Button</button>
    <button class="btn btn-success">Button</button>

> 2.尺寸大小：从大到小

<button class="btn btn-success btn-lg">Button</button>
    <button class="btn btn-success">Button</button>
    <button class="btn btn-success btn-sm">Button</button>
    <button class="btn btn-success btn-xs">Button</button>

> 3.块级按钮：可以换行

<button class="btn btn-info btn-block">Button</button>

> 4.激活按钮

<button class="btn btn-info active">Button</button>

> 6.禁用按钮

<button class="btn btn-info disabled">Button</button>