Bootstrap的安装和使用

最新推荐文章于 2020-10-20 17:01:35 发布

moquz

最新推荐文章于 2020-10-20 17:01:35 发布

阅读量233

点赞数

本文链接：https://blog.csdn.net/moquz/article/details/94123015

版权

Bootstrap简介
Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简单，粗暴。

安装Bootstrap
①登录Bootstrap官网

②下载Bootstrap

Download Bootstrap：下载预编译和压缩版Bootstrap（不含文档和源码）。

Download code：Bootstrap源码，如官网介绍，需要编译Less文件和一些安装。
下载完后解压

CSS

JS

Bootstrap基本模板
HTML5文档类型定义
Boostrap的文档是基于HTML5的。因此，要使用HTML5的文档类型定义(DTD)。

<!DOCTYPE html>

字符集设置

<!DOCTYPE html>
<html>
<head>
<title>BootStrap基础入门</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css">

</html>

下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 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 role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

单按钮下拉菜单

只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。

!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

moquz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap的安装和使用

Bootstrap简介Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简单，粗暴。安装Bootstrap①登录Bootstrap官网②下载Boots...
复制链接

扫一扫