1. 程式人生 > >bootstrap 菜單

bootstrap 菜單

roc boot 針對 響應式圖片 rand hicon con sea ont

1.bootstrap圖片

img-responsive 聲明響應式圖片

2.bootstrap 字體圖標

通過字體代替圖標,font文件夾需要和css文件夾在同一目錄

3.bootst導航條

(1)navbar 聲明導航條
(2)navbar-default 聲明默認的導航條樣式
(3)navbar-inverse 聲明反白的導航條樣式
(4)navbar-static-top去掉導航條的圓角
(5)navbar-fixed-top固定到頂部的導航條
(6)navbar-fixed-bottom 固定到底部的導航條
(7)navbar-header 申明logo的容器
(8)navbar-brand 針對logo等固定內容的樣式

(9)nav navbar-nav 定義導航條中的菜單
(10)navbar-form 定義導航條中的表單
(11)navbar-btn定義導航條中的按鈕
(12)navbar-text 定義導航條總的文本
(13)navbar-left菜單靠左
(14)navbar-right 菜單靠右

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>導航條</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">

</script>

</head>

<body>