欢迎光临
我的个人博客网站

WEB前端第五十二课——BootStrap组件(四)nav、navbar、carousel

1.nav导航

  ⑴ 基础结构:

    一种是在<ul><li>标签中嵌套<a>标签的方式;

    另一种是在<nav>标签中嵌套<a>标签的方式;

    也可以使用其它标签代替<nav>标签或<a>标签。

  涉及到的 class样式如下:

<!--    使用 ul列表创建导航    --> <ul class="nav">   <li class="nav-item">     <a class="nav-link active" href="#">Active</a>   </li>   <li class="nav-item">     <a class="nav-link" href="#">Link</a>   </li>   <li class="nav-item">     <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>   </li> </ul>  <!--    使用 <nav>标签创建导航    --> <nav class="nav">   <a class="nav-link active" href="#">Active</a>   <a class="nav-link" href="#">Link</a>   <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </nav> 

  ⑵ 排列对齐

    默认,水平居左

    .justify-content-center,水平居中

    .justify-content-end,水平居右

    .flex-column,垂直排列

    上述样式utility都是针对外层“.nav”容器进行设置的。

  ⑶ Tabs和Pills

    .nav-tabs,定义导航按钮的表单样式

    .nav-pills,定义导航按钮的药丸样式

  ⑷ Fill 和 Justified

    .nav-fill,水平填充对齐(水平空间全部占用)

    .nav-justified,水平等距对齐(每一个item宽度相等)

    当导航外层容器为<nav>标签时,必须给<a>标签添加“.nav-item”类。

  ⑸ 弹性布局

    通过添加“.flex-*-row”类定义导航弹性布局,示例如下

    <nav class="nav nav-pills flex-column nav-fill flex-sm-row">         <a class="nav-item nav-link active" href="#">Active</a>         <a class="nav-item nav-link" href="#">Longer nav link</a>         <a class="nav-item nav-link" href="#">Link</a>         <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>     </nav> 

  ⑹ 添加下拉

    通过“.dropdown”类定义导航菜单下拉内容,下拉菜单结构示例:

        <li class="nav-item dropdown">             <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>             <div class="dropdown-menu">                 <a class="dropdown-item" href="#">Action</a>                 <a class="dropdown-item" href="#">Another action</a>                 <a class="dropdown-item" href="#">Something else here</a>                 <div class="dropdown-divider"></div>                 <a class="dropdown-item" href="#">Separated link</a>             </div>         </li> 

  ⑺ 添加内容窗口

    通过添加内容窗口,使得导航菜单切换时动态呈现对应的内容。

    要实现动态对应切换,菜单<a>标签的 href或 data-target属性值必须引用窗口元素的 id值

    添加<a>标签“ data-toggle=’tab / pill’ ”属性,增加“.tab-content”容器并定义子元素“.tab-pane”

<!--    采用 ul列表的方式定义导航菜单    --> <ul class="nav nav-tabs" id="myTab" role="tablist">   <li class="nav-item" role="presentation">     <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>   </li>   <li class="nav-item" role="presentation">     <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>   </li>   <li class="nav-item" role="presentation">     <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>   </li> </ul> <!--    定义动态内容窗口“.tab-content”    --> <div class="tab-content" id="myTabContent">   <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Text Content...</div>   <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Text Content...</div>   <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Text Content...</div> </div> 

2.navbar导航条

  .navbar,用于定义导航条样式,默认菜单项垂直排列

  .navbar-expand{-sm|-md|-lg|-xl},用于定义不同屏幕尺寸时响应式布局,小于断点尺寸是垂直排列

  .navbar-brand,用于定义品牌Logo、文字等样式,可以是<a>链接,也可以是<span>等其他元素

  .navbar-nav,用于定义导航条主体菜单,支持下拉菜单项

  .navbar-toggler,用于定义菜单堆叠按钮

  .collapse.navbar-collapse,用于定义需要堆叠的菜单容器,

              容器的 id必须与“.navbar-toggler”的“data-toggle”属性值相同

  .form-inline,用于创建行内表单

  .navbar-text,用于定义垂直居中排列的文本内容

  navbar基本结构示例:

<body> <!--  创建响应式布局的导航条,当屏幕尺寸在Medium以下时,菜单选项将堆叠显示;       定义字体颜色(navbar-light|dark)、背景颜色(bg-light|dark|primary|…) --> <nav class="navbar navbar-expand-md navbar-light bg-light"> <!--  定义商标/品牌字样,可以是<a>标签也可以是<span>等其他标签;       标签内容可以是 String文本,也可以引用 <img>图片,或者是图片+文本的形式  -->     <a class="navbar-brand" href="#">Navbar</a> <!--  定义菜单选项堆叠时的按钮,data-target属性值必须为 .collapse容器的 id引用  -->     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">         <span class="navbar-toggler-icon"></span>     </button>  <!--  创建菜单选项容器,用于包裹需要堆叠的nav导航  -->     <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!--    创建导航条主体--nav导航    -->         <ul class="navbar-nav mr-auto">             <li class="nav-item active">                 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>             </li>             <li class="nav-item">                 <a class="nav-link" href="#">Link</a>             </li> <!--    创建下拉菜单项,添加 .dropdown样式    -->             <li class="nav-item dropdown"> <!--        下拉菜单的 data-toggle属性值为“dropdown”        -->                 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                     Dropdown                 </a>                 <div class="dropdown-menu" aria-labelledby="navbarDropdown">                     <a class="dropdown-item" href="#">Action</a>                     <a class="dropdown-item" href="#">Another action</a>                     <div class="dropdown-divider"></div>                     <a class="dropdown-item" href="#">Something else here</a>                 </div>             </li>             <li class="nav-item">                 <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>             </li>         </ul>  <!--    创建行内表格,用于包裹搜索框和搜索按钮    -->         <form class="form-inline my-2 my-lg-0"> <!--    创建<input>并添加“.form-control”类,也可以使用“input groups”,示例如下:         <div class="input-group">             <div class="input-group-prepend">                 <span class="input-group-text" id="basic-addon1">@</span>             </div>             <input type="text" class="form-control" placeholder="Username">         </div> -->             <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <!--    button按钮可以添加“.btn-sm|lg”类定义小尺寸、大尺寸按钮      -->             <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>         </form>     </div> </nav>  </body> 

3.Carousel轮播

  基础结构:

  ⑴ 轮播框架

    carousel通常使用<div>元素作为外层容器

    ① 必须设置 id属性,用于匹配对应的控制器和指示器

    ② 核心样式类:.carousel、.slide,表示轮播滑动

    ③ data-ride=”carousel”,该属性用于标记轮播在页面加载时开始触发

    ④ 除使用 data-ride属性触发,还可以通过 js代码使用 carousel()方法初始化轮播

  ⑵ 轮播内容(图片)

    ① “.carousel-inner”,用于定义包裹主体内容的 div元素的样式

    ② “.carousel-item”,用于定义嵌套在“.carousel-inner”内部用于包裹<img>的 div元素的样式

    ③ <img>元素除定义 src属性外,需要添加“.d-block w-* ”样式类

  ⑶ 控制器

    ① 通常用<a>嵌套<span>创建控制器,<a>标签放置在“.carousel-inner”元素的后面

    ② “.carousel-control-prev | next”类,用于定义向前或向后按钮的样式

    ③ <a>标签的 href属性必须为外层容器“.carousel”的 id

    ④ data-slide=“prev | next”,定义幻灯片切换是相对当前位置的操作

  ⑷ 指示器

    ① 通常使用<ol>有序列表创建指示器,<ol>标签书写在“.carousel-inner”元素的前序位置

    ② <ol>的样式类设置为“.carousel-indicators”

    ③ <li>元素的 data-target属性必须引用外层容器“.carousel”的 id

    ④ <li>元素的 data-slide-to属性用于定义每个节点对应的“.carousel-item”的索引,从“0”开始

  ⑸ 文本说明

    ① 描述说明可以由标题<h*>和内容<p>组合构成,嵌套在“.carousel-caption”类的 div元素中

    ② “.carousel-caption”类的 div元素书写在 <img>标签的后序位置,也可以直接添加描述文本

    ③ “.carousel-caption”元素还可以添加“.d-none  .d-*-block”(-*-代表屏幕大小),定义响应式

  ⑹ 其他属性方法

    ① “.carousel-fade”淡入淡出样式,在外层容器“.carousel”中定义

    ② data-interval=”timeValue”,定义轮播间隔时间,在 “.carousel-item”中添加该属性

    ③ .carousel()方法,在 js中调用,用于定义轮播的方式和特定操作

<body> <div id="carouselExample" class="carousel slide carousel-fade w-25" data-ride="carousel">     <ol class="carousel-indicators">         <li data-target="#carouselExample" data-slide-to="0" class="active"></li>         <li data-target="#carouselExample" data-slide-to="1"></li>         <li data-target="#carouselExample" data-slide-to="2"></li>     </ol>     <div class="carousel-inner">         <div class="carousel-item active" data-interval="1000">             <img src="./Images/rotation01.jpg" class="d-block w-100" alt="...">             <div class="carousel-caption d-none d-md-block">                 <h5>First slide label</h5>                 <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>             </div>         </div>         <div class="carousel-item" data-interval="2000">             <img src="./Images/rotation02.jpg" class="d-block w-100" alt="...">             <div class="carousel-caption d-none d-md-block">                 <h5>Second slide label</h5>                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>             </div>         </div>         <div class="carousel-item" data-interval="3000">             <img src="./Images/rotation03.jpg" class="d-block w-100" alt="...">             <div class="carousel-caption d-none d-md-block">                 <h5>Third slide label</h5>                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>             </div>         </div>     </div>     <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">         <span class="carousel-control-prev-icon" aria-hidden="true"></span>         <span class="sr-only">Previous</span>     </a>     <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">         <span class="carousel-control-next-icon" aria-hidden="true"></span>         <span class="sr-only">Next</span>     </a> </div>  </body> 

  

 

参考资料来源:BootStrap中文网(https://v3.bootcss.com/)
赞(0) 打赏
未经允许不得转载:张拓的天空 » WEB前端第五十二课——BootStrap组件(四)nav、navbar、carousel
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏