Analisis ringkas tentang mata pengetahuan yang berkaitan tentang reka letak responsif dalam Bootstrap-Tutorial Bootstrap-php.cn

Artikel ini akan membincangkan tentang Bootstrap secara praktikal dan memperkenalkan reka letak Bootstrap yang responsif, saya harap ia akan membantu semua orang.

Analisis ringkas tentang mata pengetahuan yang berkaitan tentang reka letak responsif dalam Bootstrap

Reka letak responsif bermakna tapak web boleh serasi dengan berbilang terminal, dan bukannya membuat versi khusus untuk setiap terminal. Konsep ini dilahirkan untuk menyelesaikan pelayaran Internet mudah alih.

Bar navigasi dan karusel menduduki bahagian yang tinggi dalam pengepala kebanyakan tapak web, terutamanya bar navigasi, yang memainkan peranan sebagai peta tapak.

Dalam reka letak responsif, bar navigasi diperlukan untuk memaparkan gaya berbeza mengikut saiz skrin terminal.

1. Titik pengetahuan

1.1 Bar navigasi

Penjelasan rasmi: Bar navigasi berada dalam aplikasi atau tapak web anda As komponen asas responsif untuk pengepala halaman navigasi. Ia runtuh (dan boleh dibuka dan ditutup) pada peranti mudah alih dan secara beransur-ansur berkembang secara mendatar apabila lebar port pandangan meningkat.

1.1.1 Bar navigasi asas

Sebelum menggunakan Bootstrap, adalah kebiasaan untuk menggunakan <ul> <li> untuk membina bar navigasi. [Cadangan berkaitan: "tutorial bootstrap"]

<!--代码部分-->
<style>
.navigation-past{
    list-style: none;
}
.navigation-past>li{
    float: left;
    padding: 8px;
}
.navigation-past>li>a{
    text-decoration: none;
    color: #000;
}
.active-past{
    background: #E7E7E7;
}
</style>
<ul class="navigation-past">
	   <!--选中-->
    <li class="active-past"><a href="#">Navigation First</a></li>
    <li><a href="#">Navigation Second</a></li>
    <li><a href="#">Navigation Third</a></li>
    <li><a href="#">Navigation Fourth</a></li>
    <li><a href="#">Navigation Fifth</a></li>
</ul>

Salin selepas log masuk

Rendering:

Jika anda menggunakan Bootstrap, anda sudah biasa dengan ia Hanya tambah beberapa pengubahsuaian pada struktur ini. Mula-mula, letakkan lapisan <ul> di luar <div> dan tambah gaya navbar navbar-default; kemudian tambah gaya <ul> pada nav navbar-nav akhirnya, tambah gaya active pada bahagian yang dipilih. Navigasi Bootstrap paling asas telah selesai.

<!--代码部分-->
<div class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Navigation First</a></li>
        <li><a href="#">Navigation Second</a></li>
        <li><a href="#">Navigation Third</a></li>
        <li><a href="#">Navigation Fourth</a></li>
        <li><a href="#">Navigation Fifth</a></li>
    </ul>
</div>

Salin selepas log masuk

Perenderan:

Atribut role="navigation" ditambahkan pada lapisan paling luar Ini ialah atribut tag HTML5 semantik untuk memudahkan pembaca skrin mengenal pasti mereka, dan juga untuk memudahkan penyemakan imbas oleh kumpulan orang khas.

1.1.2 Bar navigasi lanjutan

Apabila menyemak imbas beberapa tapak web rasmi, perkara pertama yang menarik perhatian ialah LOGO syarikat yang tersendiri dan karusel yang dibesar-besarkan di penjuru kiri sebelah atas , Bootstrap menyimpan kedudukan LOGO dalam navigasi. Kaedah penggunaan ialah menambah <div> gaya navbar-header di dalam luar <div>, dan menambah <div> elemen gaya navbar-brand di dalam <a> ini.

<!--代码部分-->
<div class="navbar navbar-default" role="navigation">
			<div class="navbar-header">
						<a href="#" class="navbar-brand">LOGO</a>
			</div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Navigation First</a></li>
        <li><a href="#">Navigation Second</a></li>
        <li><a href="#">Navigation Third</a></li>
        <li><a href="#">Navigation Fourth</a></li>
        <li><a href="#">Navigation Fifth</a></li>
    </ul>
</div>

Salin selepas log masuk

Perenderan:

Kadangkala navigasi peringkat pertama tidak mencukupi dan ia perlu dipadankan dengan navigasi peringkat kedua untuk dipaparkan lebih banyak kandungan. Penggunaan: Mula-mula tambah gaya <li> pada elemen dropdown yang perlu menambah navigasi sekunder, tambah gaya <a> dan atribut dropdown-toggle pada elemen data-toggle="dropdown" kemudian letakkan <li> di bawah <a> A <ul> <li> gabungan, <ul> tag menambah gaya dropdown-menu.

<!--代码部分-->
<div class="navbar navbar-default" role="navigation">
			<div class="navbar-header">
						<a href="#" class="navbar-brand">LOGO</a>
			</div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Navigation First</a></li>
        <li><a href="#">Navigation Second</a></li>
        <li><a href="#">Navigation Third</a></li>
        <li><a href="#">Navigation Fourth</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                Navigation Fifth
                <ul class="dropdown-menu">
                    <li><a href="#">Sub-Navigation First</a></li>
                    <li><a href="#">Sub-Navigation Second</a></li>
                    <li><a href="#">Sub-Navigation Third</a></li>
                </ul>
            </a>
        </li>
    </ul>
</div>

Salin selepas log masuk

Rendering:

Atribut baharu aria-haspopup="true" aria-expanded="false" muncul di sini Begitu juga, ini juga merupakan atribut baharu yang ditambahkan oleh HTML5, dipetik di sini Jawapan daripada Jiang Zhongqiu dalam komuniti Segmentfault.

aria-haspopup: true bermaksud menu atau elemen terapung akan muncul apabila diklik false bermakna tiada kesan pop-up. aria-expanded: menunjukkan keadaan berkembang. Lalai ialah undefined, yang bermaksud status pengembangan semasa tidak diketahui. Nilai pilihan lain: true menunjukkan bahawa elemen dikembangkan; false menunjukkan bahawa elemen tidak dikembangkan.

Kotak lungsur yang biasa anda lihat biasanya mempunyai simbol anak panah ke bawah ▼ Begitu juga, kesan ini turut disokong dalam Bootstrap, tetapi anda perlu memperkenalkan ikon fon Glyphicons pustakanya sendiri.

Pengenalan rasmi: Bootstrap termasuk lebih daripada 250 ikon fon daripada Glyphicon Halflings. Glyphicons Halflings biasanya dibayar, tetapi pengarangnya membenarkan Bootstrap menggunakannya secara percuma. Untuk menyatakan rasa terima kasih anda, saya harap anda akan cuba menambah pautan mesra kepada Glyphicons apabila menggunakannya.

使用方法：新建一个 <span> 元素，然后在里面加上样式 glyphicon glyphicon-triangle-bottom。

Glyphicons 字体图标使用示例：

<!--代码部分-->
<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Navigation Fifth <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
        <ul class="dropdown-menu">
            <li><a href="#">Sub-Navigation First</a></li>
            <li><a href="#">Sub-Navigation Second</a></li>
            <li><a href="#">Sub-Navigation Third</a></li>
        </ul>
    </a>
</li>

Salin selepas log masuk

效果图：

注意：

<ul> <li>Glyphicons 字体图标和文本之间添加一个空格，不然会影响样式（padding）的正确显示。 <li>服务器需要正确添加相应的 MIME 类型，否则加载字体会报 404 错误。

另外这里的箭头也可以使用 Bootstrap 自带的样式 caret 来实现，这里的箭头是用 CSS 实现了，使用方法：<span class="caret"></span>。

1.1.3 响应式导航栏

在手机端浏览网站的时候常看到几个横线（≡）组成的导航向导，Bootstrap 作为一个移动设备优先也是支持这样的需求的，响应式导航的使用的方法比较固定，首先在导航标题 <div class="navbar-header"> 内加上一段固定写法的代码；然后在需要在小屏时折叠的 <ul> 元素外包一层样式 collapse navbar-collapse 的 <div> 元素，并给这个元素加上任意名称的 ID，例如：id="navigation-collapse"；最后在响应式按钮 <button> 元素上加上 data-target 属性指向要折叠的内容 id，例如：data-target="#navigation-collapse"。

<!--代码部分-->
<div class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
						<!--以下为固定写法，用到的时候复制粘贴即可-->
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navigation-collapse">
          <span class="sr-only">Toggle Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">LOGO</a>
    </div>
    <div class="collapse navbar-collapse" id="navigation-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Navigation First</a></li>
            <li><a href="#">Navigation Second</a></li>
            <li><a href="#">Navigation Third</a></li>
            <li><a href="#">Navigation Fourth</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    Navigation Fifth <span class="caret"></span>
                    <ul class="dropdown-menu">
                        <li><a href="#">Sub-Navigation First</a></li>
                        <li><a href="#">Sub-Navigation Second</a></li>
                        <li><a href="#">Sub-Navigation Third</a></li>
                    </ul>
                </a>
            </li>
        </ul>
    </div>
</div>

Salin selepas log masuk

效果图：

1.2 轮播

图片轮播是网站的重要组成部分之一，常用来放活动广告或企业宣传图，有时也叫做“幻灯片”，Bootstrap 中的轮播效果是由 JavaScript 插件 Carousel 来实现的。

1.2.1 基础轮播

轮播的使用方法也是相对固定的，特殊场景按需求修改即可。需要注意的是需要给最外层 <div> 元素加上一个 id，并在小圆点出指向这个 id。

<!--代码部分-->
<div id="my-banner" class="carousel">
    <!--放置小圆点，点击可以切换轮播-->
    <ol class="carousel-indicators">
        <!--加上样式active表示默认显示的轮播，data-slide-to="0"属性表示显示轮播的顺序-->
        <li data-target="#my-banner" data-slide-to="0" class="active"></li>
        <li data-target="#my-banner" data-slide-to="1"></li>
    </ol>
    <!--这里放置轮播显示的图片-->
    <div class="carousel-inner">
        <!--加上样式active表示默认显示的图片-->
        <div class="item active">
            <img src="http://www.mazey.net/img/upload/image/20170712/b1.jpg" alt="轮播">
        </div>
        <div class="item">
            <img src="http://www.mazey.net/img/upload/image/20170712/b2.jpg" alt="轮播">
        </div>
    </div>
</div>

Salin selepas log masuk

效果图：

1.2.2 进阶的轮播

一个完整的轮播应具有自动播放、点击切换、悬浮停止、外加说明文字功能，别担心，这些 Bootstrap 通通都有！

1.2.2.1 自动播发

最外层 <div> 元素添加属性 data-ride="carousel" 和样式 slide（使轮播播放更平滑），如：

。此时轮播的自动播放时间为 5 秒（默认），如想改变此值设置属性 data-interval="你想要的值"，如我想要 3 秒（3000 ms）轮播一次则设置 data-interval="3000"。另外轮播是默认悬浮停止播放的（data-pause="hover"），如想禁止悬浮播放设置属性 data-pause="false" 即可。

1.2.2.2 添加文字

在轮播图片 <img> 元素下面添加样式 carousel-caption 的 <div>，里面存放文字便可正确显示在轮播上面。

<!--代码部分-->
<div class="carousel-caption">
    <h5>夜里总是下雨</h5>
</div>

Salin selepas log masuk

1.2.2.3 点击切换

在轮播图片下面放置两个 <a> 元素，href 指向轮播 id，添加属性 data-slide="prev/next 向前/向后"。

<!--代码部分-->
<!--<a>元素的href指向轮播id-->
<a class="left carousel-control" href="#my-banner" data-slide="prev" role="button">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#my-banner"  data-slide="next" role="button">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

Salin selepas log masuk

轮播代码示例：

<!--代码部分-->
<div id="my-banner" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="false">
    <!--放置小圆点，点击可以切换轮播-->
    <ol class="carousel-indicators">
        <!--加上样式active表示默认显示的轮播，data-slide-to="0"属性表示显示轮播的顺序-->
        <li data-target="#my-banner" data-slide-to="0" class="active"></li>
        <li data-target="#my-banner" data-slide-to="1"></li>
    </ol>
    <!--这里放置轮播显示的图片-->
    <div class="carousel-inner">
        <!--加上样式active表示默认显示的图片-->
        <div class="item active">
            <img src="http://www.mazey.net/img/upload/image/20170712/b1.jpg" alt="轮播">
            <div class="carousel-caption">
                <h5>夜里总是下雨</h5>
            </div>
        </div>
        <div class="item">
            <img src="http://www.mazey.net/img/upload/image/20170712/b2.jpg" alt="轮播">
            <div class="carousel-caption">
                <h5>后除提醒君の世界</h5>
            </div>
        </div>
    </div>
    <!--<a>元素的href指向轮播id-->
    <a class="left carousel-control" href="#my-banner" data-slide="prev" role="button">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#my-banner"  data-slide="next" role="button">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

Salin selepas log masuk

效果图：

二、实战

试着组合栅格系统 + 导航栏 + 轮播布局一个响应式页面。

电脑端效果图：

移动端效果图：

其实实现这样一个效果很简单，首先看一下栅格参数如何在多种屏幕设备上工作的。

Tambah gaya col-xs-*, col-sm-* dan col-md-* pada kotak berita dan maklumat pada masa yang sama Apabila skrin kecil (lebar skrin col-xs-* , col-sm-* sah, col-md-* tidak sah; apabila skrin besar (lebar skrin ≥ 992px), col-md-* sah, col-xs-*, col-sm-* tidak sah. Contohnya: <div class="col-xs-12 col-sm-12 col-md-6">新闻</div><div class="col-xs-12 col-sm-12 col-md-6">资讯</div>.

Alamat demo: https://mazey.cn/bootstrap-blueprints/lesson-second-navigation/index.html

Alamat kod sumber: https://github.com / mazeyqian/bootstrap-blueprints/tree/master/lesson-second-navigation.

Untuk pengetahuan lanjut tentang bootstrap, sila lawati: tutorial asas bootstrap! !

Atas ialah kandungan terperinci Analisis ringkas tentang mata pengetahuan yang berkaitan tentang reka letak responsif dalam Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!