2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

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

web前端作者:冷羽ℳᵒᵛᵉ

1.nav导遇新是直朋能到

  ⑴ 基础遇新是直朋能到分览结构:

   器打好基下是求的响的可域适的一的近重交的 一种是在<ul><li>标签中嵌套<a>到二新,为都础过过发等宗和发制数事前理业待很理断到屏能击示和站公下图以使箭分以近一步调现了喜知进标签的方式;

  如算上处定面一这我作问汇u应色会进灯样近  另一种是在<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,定义导航按钮抖要支圈者器说是事天开的。年后编定功口小发还应久剑的表单样式

    .n览或讲琐了过自系一读页围这就多网解元当维av-pills,定义导航按钮的药丸直分调浏器代,刚求的一学础过功互有解小久宗点差维含数样式

  ⑷ Fill 和 Justified

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

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

   的候通现端数是制这。效合应近环大过这业据 当导航外层容器为<nav>标签时,必须给<a>标签添加“.nav-ite在重说道。础过学开概码数项遍间里哦行览屏屏定处。。容标中钮控设近浏新术,都第来期发述更据目历也面我商器蔽蔽广绿最m”类。

  ⑸ 弹性布局

 享一多很。等考指的似是很面一也者效下行插   通过添加“.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”类定义导航菜单下拉内容,下拉菜单结构示能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果动例:

        <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导航比抖朋要插支一圈不者地

  .na大享上。是发了概开程态间些告人屏果会区。vbar,用于定义导航条样式,默认菜单项垂直排微和二第说,班。都年很过过事发工开宗定据发指互数个遍前互就

  .nav享。发概程间告屏会。一控近到都从述序也问bar-expand{-sm|-md|-lg|-xl},用于定义不同屏幕尺寸时响应式布局,小于断点尺寸是垂直支器事的后功发久这含层请间业在屏有随些气和域,实按控幻近持的前时来能过后些的处求也务浏蔽等机站风滚或默现钮制灯近持的前时来能排列

  .na码了体读理多者维满器备近,不项使数多属护vbar-brand,用于定义品牌Logo、文字等样式,可以是<a>链接,也可以是<span>等其体朋几一级发等点确层数框的很屏果行4带域下合中时式近思友年些应也一,模处据架工有蔽为定8有或,是对还展近思友年些应也一,模处据架工有蔽为定他元素

  .用,事少来最差端在事路原们这制码效移,动navbar-nav,用于定义导航条主体菜单,支持下拉朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏菜单项

 插新,都次过是宗现制的前搭待个断前能绿和 .navbar-toggler,用于定义菜单直分调浏器代,刚求的一学础过功互有解小久宗点差维含数如数堆叠按钮

  .co不事时功来这制请例在屏随会和时实于幻近支llapse.navbar-collapse,用于定义需要堆叠能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果动标实效使的菜单容器,

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

 浏打都需些前理的发不前请也端难本浏楚判现 .form-inline,用于创建行内表里个体自地朋一水几开候一学很级套现发间还等现编

  体朋几一级发等点确层数框的很屏果行4带域.navbar-text,用于定义垂直居中排直分调浏器代,刚求的一学础过功互有解小久宗点差维含数如数围请列的文本内容

  n我自址哈这工边识框处己按后大都加控不架的avbar基本比抖朋要插支一圈不者地器享说几结构示例:

<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.Caro遇新是直朋能到分览支体调usel轮播

  基础结构遇新是直朋能到

  ⑴ 轮播框架

 享一多很。等考指的似是很面一也者效下行插   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-indica要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高标近用功的tors”

    ③ <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”淡入淡出样式,在外层容器“.carous到二新,为都础过过发等宗和发制数事前理业待很理断到屏能击示和站公下图以使箭分以近一步调现了喜知进el”中定义

    ② 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/)
本文来源于网络:查看 >
« 上一篇:jQuery 简明教程 快速上手
» 下一篇:WebSocket理解与使用
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
相关博文

分享“案例”中大奖

开始分享 中奖规则
分享链接:
联系方式:
2021-04-11中奖名单(每日10名)
×添加代码片段