> 웹 프론트엔드 > HTML 튜토리얼 > Bootstrap 3之美04-自定义CSS、Theme、Package_html/css_WEB-ITnose

Bootstrap 3之美04-自定义CSS、Theme、Package_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:59:21
원래의
1242명이 탐색했습니다.

本篇主要包括:

■  自定义CSS
■  自定义Theme
■  自定义Package

 

  自定义CSS

有时候,需要自定义或重写Bootstrap默认的CSS。
→在css文件夹下创建一个site.css
→假设要对container类重写,在site.css中

.container {    background-color: #eee;}
로그인 후 복사

→把site.css引用到index.html中,并放置在bootstrap.min.cs的下方
    <link href="css/bootstrap.min.css" rel="stylesheet" />    <link href="css/site.css" rel="stylesheet" />
로그인 후 복사

→浏览index.html,发现背景色已经变成灰色

自定义Theme

区域内,给id为menu的div添加属性class="navbar navbar-default",并调整如下:

        <header class="container">            <div id="menu" class="navbar navbar-default">                <div id="logo">                    <a href=".">新浪体育</a>                </div>                <ul>                    <li><a href="#">主页</a></li>                    <li><a href="#">关于我们</a></li>                    <li><a href="#">联系我们</a></li>                </ul>                <button class="btn">登录</button>            </div>        </header>
로그인 후 복사

把css文件夹下的bootstrap-theme.min.css样式文件引入到index.html中,并放置在bootstrap.min.css下方。如下:

    <link href="css/bootstrap.min.css" rel="stylesheet" />    <link href="css/bootstrap-theme.min.css" rel="stylesheet" />    <link href="css/site.css" rel="stylesheet" />               
로그인 후 복사


我们看到,导航内容都被框在一个圆角矩形框内。如果对当前的Theme不够满意,还可以去http://bootswatch.com/这个网站,该网站提供Bootstrap开源Theme。比如对Cyborg这个Theme感兴趣,点击Download按钮,在打开的页面中右键,选择另存为,把文件名设置为Cyborg.bootstrap.min.css,并保存到网站的css文件夹。

用Cyborg.bootstrap.min.css文件替代掉原先的bootstrap-theme.min.css文件,变成如下:

    <link href="css/bootstrap.min.css" rel="stylesheet" />    <link href="css/Cyborg.bootstrap.min.css" rel="stylesheet" />    <link href="css/site.css" rel="stylesheet" />
로그인 후 복사

再次浏览index.html,Theme主题发生了很大的变化:

 

  自定义Package

→打开网站:http://getbootstrap.com/
→点击Customize菜单项
→勾选需要的选项
→最后点击页面下方的"Complie and Download"按钮,这样就会生成自定义的Package

 

参考资料:WilderMinds  

 

“Bootstrap 3之美”系列类包括:

Bootstrap 3之美01-下载并引入页面

Bootstrap 3之美02-Grid简介和应用

Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

Bootstrap 3之美04-自定义CSS、Theme、Package

Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿