부트스트랩의 탐색 모음 탐색 모음에 대한 간략한 토론-부트스트랩 튜토리얼-php.cn

집

웹 프론트엔드

부트스트랩 튜토리얼

부트스트랩의 탐색 모음 탐색 모음에 대한 간략한 토론

青灯夜游

Jun 03, 2021 am 11:38 AM

bootstrap

이 기사에서는 bootstrap의 탐색 모음 탐색 모음을 안내합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

부트스트랩의 탐색 모음 탐색 모음에 대한 간략한 토론

【관련 추천: "bootstrap tutorial"】

container: 960px 너비 고정, (반응형 스타일이 도입되면 적절하게 조정됩니다. 예: 1600*900, 1200px로 표시됩니다)

Container-fluid: 적응형 화면 너비, 즉 전체 화면 표시입니다.

행과 열을 참조할 수 있습니다: https://blog.csdn.net/yzy85/article/details/53021385?locationNum=2&fps=1 및 http://v3.bootcss.com/css/

특히 http : //v3.bootcss.com/css/에서는 매우 명확하게 설명합니다

예:

단일 그룹 사용 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row.

.navbar - 탐색 모음 구성 요소를 탐색 모음 구성 요소로 설정합니다.

.navbar-default - 탐색 모음 구성 요소를 기본 테마로 지정합니다.

.navbar-inverse - 탐색 모음 구성 요소를 검정색으로 지정합니다. theme;

.navbar-fixed-top - 상단에 고정될 네비게이션 바 구성요소를 설정합니다.

.navbar-fixed-bottom - 하단에 고정될 네비게이션 바 구성요소를 설정합니다. - 상위 요소를 채울 너비를 100%로 설정합니다.

.navbar-header - 주로 p 요소를 브랜드 아이콘과 토글 버튼을 래핑하는 탐색 모음 구성 요소로 지정합니다. 탐색 모음 구성 요소의 토글 버튼으로 버튼 요소

.collapsed ——뷰포트가 768px보다 작은 경우에만 표시되도록 버튼 요소 설정

.navbar-brand——내비게이션에 브랜드 아이콘 설정 bar 구성 요소;

navbar-brand는 기본적으로 텍스트를 포함하고 사진을 넣을 수도 있지만 반드시 작은 사진이어야 합니다. 사진이 너무 크면 위치가 낮아집니다.

<head>
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.min.css&#39;) }}">
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.css&#39;) }}">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <a href="" class="navbar-brand" style="width:250px;">
                <img  src="/static/imghwm/default1.png"  data-src="{{ url_for(&#39;static&#39;, filename=&#39;base/images/logo.png&#39;) }}"  class="lazy"     style="max-width:90%" alt="부트스트랩의 탐색 모음 탐색 모음에 대한 간략한 토론" > STEM教育
            </a>
        </div>
    </div>
</nav>
</body>

코드가 실행되면 스타일은 다음과 같습니다.

아이콘과 글꼴이 잘못 배치된 것을 발견했습니다. display: inline;만 추가하면 됩니다. 추가된 코드는 다음과 같습니다.

<head>
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.min.css&#39;) }}">
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.css&#39;) }}">
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <a href="" class="navbar-brand" style="width:250px;">
                <img  src="/static/imghwm/default1.png"  data-src="{{ url_for(&#39;static&#39;, filename=&#39;base/images/logo.png&#39;) }}"  class="lazy"     style="max-width:90%" alt="부트스트랩의 탐색 모음 탐색 모음에 대한 간략한 토론" > STEM教育
            </a>
        </div>
    </div>
</nav>
</body>

코드가 실행된 후 스타일은 아래와 같으며 원하는 스타일이 되었습니다.

가능합니다.

<head>
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.min.css&#39;) }}">
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.css&#39;) }}">
<style>
    .navbar-brand>img {
        display: inline;
    }
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <a href="" class="navbar-brand" style="width:250px;">
                <img  src="/static/imghwm/default1.png"  data-src="{{ url_for(&#39;static&#39;, filename=&#39;base/images/logo.png&#39;) }}"  class="lazy"     style="max-width:90%" alt="부트스트랩의 탐색 모음 탐색 모음에 대한 간략한 토론" > STEM教育
            </a>
        </div>
    </div>
</nav>
</body>

효과는 같습니다:

설명:

display:inline의 기능은 객체가 인라인 요소로 표시되도록 설정하는 것입니다. 즉, 변경할 수 있습니다. 수직 배열을 수평 배열로.

.collapse - 뷰포트가 768px보다 클 때 표시되도록 p 요소를 설정합니다.

.navbar-collapse - p 요소를 탐색 모음 구성 요소의 각 목록 항목의 상위 요소로 설정합니다. 여기서는 약간 명확하지 않습니다. 설명하겠습니다. 이제 축소 기능은 축소 스타일로 설정된 p 요소 내의 다른 모든 요소를 축소하고 브라우저 창 너비가 768px보다 작을 때 목록에 표시하는 것입니다.

예:

현재 크기에서는 접혀지지 않은 것을 볼 수 있습니다. 다시 줄이면 접혀집니다.

.navbar-nav——ul을 다음과 같이 설정합니다. 탐색 표시줄 구성 요소 목록 요소

.navbar-left - 탐색 표시줄의 요소를 왼쪽으로 정렬하도록 설정합니다.

.navbar-right - 탐색 표시줄의 요소를 오른쪽으로 정렬하도록 설정합니다.

navbar-right가 나타날 때:

<div class="navbar-collapse collapse">
    <form class="navbar-form">
        <div class="form-group input-group">
            <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
            <span class="input-group-btn"><a class="btn btn-default"><span
                    class="glyphicon glyphicon-search"></span>搜索</a></span>
        </div>
    </form>
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a ><span class="glyphicon glyphicon-log-in"></span> 登录</a>
        </li>
        <li>
            <a ><span class="glyphicon glyphicon-log-out"></span> 退出</a>
        </li>
    </ul>
</div>

실행 결과는 다음과 같습니다:

form과 ul이 같은 줄에 있지 않음을 알 수 있습니다. 이는 ul이 navbar-right를 사용하여 여부를 지정하기 때문입니다. 오른쪽에 표시하는 반면 양식은 왼쪽 또는 오른쪽으로 표시할지 여부를 지정하지 않습니다. 양식은 왼쪽에 표시되도록 지정해야 합니다. 즉, 스타일을 navbar-left

<div class="navbar-collapse collapse">
    <form class="navbar-form navbar-left">
        <div class="form-group input-group">
            <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
            <span class="input-group-btn"><a class="btn btn-default"><span
                    class="glyphicon glyphicon-search"></span>搜索</a></span>
        </div>
    </form>
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a ><span class="glyphicon glyphicon-log-in"></span> 登录</a>
        </li>
        <li>
            <a ><span class="glyphicon glyphicon-log-out"></span> 退出</a>
        </li>
    </ul>
</div>

로 설정해야 합니다. 실행 솔루션은 다음과 같습니다.

navbar-nav 스타일이 사용되지 않는 경우 ul 태그에 사용됩니다. :

<ul class="nav  navbar-right">
    <li>
        <a ><span class="glyphicon glyphicon-log-in"></span> 登录</a>
    </li>
    <li>
        <a ><span class="glyphicon glyphicon-log-out"></span> 退出</a>
    </li>
</ul>

는 두 개의 li 태그가 다른 줄에 표시됩니다. navbar-nav를 추가하면 두 개의 li 태그가 같은 줄에 표시될 수 있습니다.

.navbar-form - 탐색 모음 구성 요소 내부의 양식 구성 요소입니다.

navbar-form: 주로 모든 양식을 인라인 요소로 조정합니다.

.navbar-btn——为导航条组件内部的按钮样式；

.navbar-text——为导航条组件内部的文本样式；

.navbar-link——在标准的导航组件之外添加标准链接，让链接有正确的颜色和反色设置；

.breadcrumb——设置列表元素显示为路径导航组件；

form-goup和input-goup参考：https://blog.csdn.net/qq_15267341/article/details/54016811写的很好哦。

<span class="glyphicon glyphicon-search"></span>通常用户放在搜索字体的前面，显示一个小小的搜索图标，如下图：

.btn 是按钮的基础，主要是调整盒模型的，.btn-default 以及其他 .btn-* 系列则是视觉样式的调整，如颜色、大小等等。

例子：

<a ><span class="glyphicon glyphicon-search"></span>搜索</a>

运行效果是：

非常难看，鼠标放上去的时候，字体下面还会出现一根横线。如果将a元素的样式设置成btn btn-default时，就好看多了，代码如下：

鼠标放上去的时候，也没有横线的，只是由白色编程灰色了：

input-group-btn的作用：

例子:

<form class="navbar-form">
    <div class="form-group input-group">
        <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
        <span><a class="btn btn-default"><span
                class="glyphicon glyphicon-search"></span>搜索</a></span>
    </div>
</form>

运行效果如下：

想要将搜索放在文本框后面，只需要将入input-group-btn样式就可以了：

<div class="navbar-collapse collapse">
    <form class="navbar-form">
        <div class="form-group input-group">
            <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
            <span class="input-group-btn"><a class="btn btn-default"><span
                    class="glyphicon glyphicon-search"></span>搜索</a></span>
        </div>
    </form>
</div>

运行结果如下：

如果将input-group-btn换成input-group-addon后，就会变成如下的样子：

是不是很难看？

更多编程相关知识，请访问：编程视频！！

위 내용은 부트스트랩의 탐색 모음 탐색 모음에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 博客园에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사

반응 형 웹 디자인을위한 부트 스트랩 그리드 시스템 이해May 14, 2025 am 12:07 AM

bootstrap'sgridsystemiseffivedueToits12-ColumnlayoutAndResponsiveClasses, forflexibleAndaintainabledeSigns.toleVerageIt : 1) userOwsAndColumnsWithClassesLikeCol-MD, Col-SM, 및 Col-lggfordifferentsCreensizes.2) simplifyoutscessiv

부트 스트랩 그리드 시스템 : 응답 레이아웃에 대한 포괄적 인 안내서May 13, 2025 pm 04:17 PM

bootstrapgridsystemissentialforcreatingResponsevelayouts.1) itusescontainers, rows 및 columnsbasedona12-columnlayout.2) cssflexboxandmediaqueriesensurecrexibilityAcrossScReensizes.3) ClassLikecol-xs, Col-MD, 4) 4) 4)

부트 스트랩 : 응용 프로그램 및 장점이 설명되었습니다May 10, 2025 am 12:18 AM

부트 스트랩은 반응 형 웹 사이트를 신속하게 구축하기위한 프론트 엔드 프레임 워크입니다. 장점은 다음과 같습니다. 1. 빠른 개발 : 사전 정의 된 스타일과 구성 요소를 활용합니다. 2. 일관성 : 통합 디자인 스타일을 제공합니다. 3. 반응 형 디자인 : 내장 그리드 시스템은 다양한 장치에 적용됩니다. Bootstrap은 CSS 클래스 및 JavaScript 플러그인을 통해 웹 개발 프로세스를 단순화합니다.

부트 스트랩 : 반응 형 웹 개발 단순화May 09, 2025 am 12:13 AM

Bootstrap은 주로 래스터 시스템, 사전 정의 된 구성 요소 및 JavaScript 플러그인을 통해 개발 프로세스를 단순화합니다. 1. 그리드 시스템을 통해 유연한 레이아웃, 2. 버튼 및 탐색 막대와 같은 사전 정의 된 구성 요소는 스타일 설계를 단순화합니다. 3. JavaScript 플러그인은 대화식 기능을 향상시키고 개발 효율성을 향상시킵니다.

부트 스트랩 : 반응 형 웹 디자인의 키May 08, 2025 am 12:24 AM

Bootstrap은 트위터에서 개발 한 오픈 소스 프론트 엔드 프레임 워크로, 풍부한 CSS 및 JavaScript 구성 요소를 제공하여 반응 형 웹 사이트의 구성을 단순화합니다. 1) 그리드 시스템은 12 열 레이아웃을 기반으로하며 다른 화면 크기의 요소 표시는 클래스 이름을 통해 제어됩니다. 2) 구성 요소 라이브러리에는 사용자 정의 및 사용이 쉬운 버튼, 내비게이션 바 등이 포함되어 있습니다. 3) 작업 원칙은 CSS 및 JavaScript 파일에 따라 다르며 의존성 및 스타일 충돌 처리에주의를 기울여야합니다. 4) 사용 예제는 사용자 정의 기능의 중요성을 강조하여 기본 및 고급 사용을 보여줍니다. 5) 일반적인 오류에는 그리드 시스템 계산 오류 및 스타일 범위가 포함되며 개발자 도구를 사용하여 디버깅해야합니다. 6) 성능 최적화 권장 사항이 필요한 구성 요소 만 소개하고 사전 처리기를 사용하여 샘플을 사용자 정의합니다.

부트 스트랩 : 웹 디자인을위한 강력한 프레임 워크May 07, 2025 am 12:05 AM

Bootstrap은 웹 개발 프로세스를 단순화하고 속도를 높이기 위해 Twitter 팀이 개발 한 오픈 소스 프론트 엔드 프레임 워크입니다. 1. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로하며 최신 사용자 인터페이스를 만들기위한 풍부한 구성 요소와 도구를 제공합니다. 2. 핵심은 사전 정의 된 클래스와 구성 요소를 통해 다양한 레이아웃과 스타일을 구현하는 반응 형 디자인에 있습니다. 3. Bootstrap은 사용 및 조정이 쉬운 탐색 막대, 버튼, 양식 등과 같은 사전 정의 된 UI 구성 요소를 제공합니다. 4. 사용의 예로는 간단한 내비게이션 바와 고급 접을 수있는 사이드 바를 작성하는 것이 포함됩니다. 5. 일반적인 오류에는 버전 충돌, CSS 덮어 쓰기 및 JavaScript 오류가 포함되며 버전 관리 도구를 통해 사용할 수 있습니다.

React의 부트 스트랩의 힘 : 상세한 모양May 06, 2025 am 12:06 AM

부트 스트랩은 두 가지 방법으로 React에 통합 될 수 있습니다. 1) 부트 스트랩을 사용한 CSS 및 JavaScript 파일; 2) React-Bootstrap 라이브러리를 사용하십시오. React-Bootstrap은 캡슐화 된 React 구성 요소를 제공하여 React에서 부트 스트랩을 사용하여보다 자연스럽고 효율적입니다.

React에서 부트 스트랩 구성 요소 사용 : 단계별 자습서May 05, 2025 am 12:09 AM

React 프로젝트에서 부트 스트랩 구성 요소를 사용하는 두 가지 방법이 있습니다. 1) 원래 부트 스트랩의 CSS 및 JavaScript; 2) React-Bootstrap 또는 ReactStrap과 같은 React를 위해 특별히 설계된 라이브러리를 사용하십시오. 1) NPM을 통해 부트 스트랩을 설치하고 항목 파일에 CSS 파일을 소개 한 다음 React 구성 요소에서 부트 스트랩 클래스 이름을 사용하십시오. 2) React-Bootstrap 또는 ReactStrap을 설치 한 후 제공하는 React 구성 요소를 직접 사용하십시오. 이 방법을 사용하여 반응 형 UI를 신속하게 구축하지만 스타일 로딩 및 JavaScript에주의를 기울이십시오.

See all articles