bootstrap 框架
BootStrap 学习从现在开始,前端开发框架 Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢。
- <!DOCTYPE html>
- <html lang="zh-cn">
- <!-- 语言设置 -->
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- 浏览器缩放 -->
- <title>
- Bootstrap
- </title>
- <!-- Bootstrap -->
- <link href="CSS/bootstrap.min.css" rel="stylesheet">
- <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media
- queries -->
- <!-- WARNING: Respond.js doesn't work if you view the page via file://
- -->
- <!--[if lt IE 9]>
- <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js">
- </script>
- <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js">
- </script>
- </head>
- <body>
- <h1>
- 你好
- </h1>
- <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
- <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">
- </script>
- <!-- Include all compiled plugins (below), or include individual files
- as needed -->
- <script src="js/bootstrap.min.js">
- </script>
- </body>
- </html>
导航
导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一,可以便于用户查找网站所提供的各项功能服务。
- <nav class="nabber navbar-default" role="navigation">
- <!--导航条、默认样式、role定义内容是一个导航条-->
- <div class="container-fluid">
- <!--container居中固定宽度、c-f自适应大小的导航条-->
- <div class="navbar-header">
- <!--在响应式浏览器宽度小于一定值时,显示按钮-->
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
- data-target="#bs-example-navbar-collapse-1">
- <span class="sr-only">
- Toggle navigation
- </span>
- <span class="icon-bar">
- </span>
- <span class="icon-bar">
- </span>
- <span class="icon-bar">
- </span>
- </button>
- <!--logo图标-->
- <a class="navbar-brand" href="#">
- Brand
- </a>
- </div>
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
- <!--包裹代码,在宽度大于一定值时,button和此代码是没有作用的-->
- <!--导航条导航项目-->
- <ul class="nav navbar-nav">
- <li class="active">
- <a href="#">
- a
- </a>
- </li>
- <li>
- <a href="#">
- a
- </a>
- </li>
- </ul>
- </div>
- </div>
- </nav>
- .navbar-inverse:改变导航条的背景颜色 .container:居中显示 固定导航条会遮盖页面内容,解决办法设置body的*padding-top*
下拉菜单
小伙伴们注意,在 Bootstrap 框架中的下拉菜单组件是一个独立的组件。
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">
- 下拉菜单
- <span class="caret">
- </span>
- </a>
- <ul class="dropdown-menu" role="menu">
- <li>
- <a href="#">
- Action
- </a>
- </li>
- <li>
- <a href="#">
- Another action
- </a>
- </li>
- <li>
- <a href="#">
- Something else
- </a>
- </li>
- <li class="divider">
- </li>
- <li>
- <a href="#">
- linkkk/a>
- </li>
- </ul>
- </li>
data 属性 API 可以使用所有的 Bootstrap 插件
轮播广告(carousel)
- <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
- <!--底部导航点。。。-->
- <ol class="carousel-indicators">
- <li data-target="#carousel-example-generic" data-slide-to="0">
- </li>
- <li data-target="#carousel-example-generic" data-slide-to="1" class="active">
- </li>
- <li data-target="#carousel-example-generic" data-slide-to="2">
- </li>
- </ol>
- <!--轮播广告内容-->
- <div class="carousel-inner" role="listbox">
- <div class="item active">
- <img src="…">
- <div class="carousel-caption">
- ……
- </div>
- </div>
- <div class="item active">
- <img src="…">
- <div class="carousel-caption">
- ……
- </div>
- </div>
- </div>
- <!--左右箭头-->
- <a class="left carousel-control" href="#carousel-example-generic" role="button"
- data-slide="prev">
- <span class="glyphicon glyphicon-chevron-left">
- </span>
- <pan class="sr-only">
- previous
- </span>
- </a>
- <a class="right carousel-control" href="#carousel-example-generic" role="button"
- data-slide="next">
- <span class="glyphicon glyphicon-chevron-right">
- </span>
- <pan class="sr-only">
- Next
- </span>
- </a>
- </div>
.data-slide-to 索引,指向轮播广告的内容,从 0 开始
.carousel 设置广告框的样式 (高度、背景色)
.carousel .item 设置广告框的样式 (高度、背景色)
栅格系统布局
- <div class="container">
- <div class="row">
- <div class="col-md-4">
- .col-md-4
- </div>
- <div class="col-md-4">
- .col-md-4
- </div>
- <div class="col-md-4">
- .col-md-4
- </div>
- </div>
- </div>
如果大家还想深入学习,可以点击进行学习,再为大家附 3 个精彩的专题:
来源: http://www.jb51.net/article/98719.htm