-
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">慕课网</a> </div> <ul class="nav navbar-nav"> <li><a href="##">网站首页</a></li> <li class="active"><a href="##">名师介绍</a></li> <li><a href="##">成功案例</a></li> <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle">关于我们<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">公司简介</a></li> <li class="disabled"><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </li> </ul> <form action="##" class="navbar-form navbar-right" rol="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="请输入关键词" /> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div>查看全部
-
对于结构方面，非常的简单。使用一个名为“btn-group”的容器，把多个按钮放到这个容器中。如 ☑ LESS版本：对应的源文件为buttons.less ☑ Sass版本：对应的源文件为_buttons.scss ☑ CSS版本：对应bootstrap.css文件第3131行～第3291行 使用方法：查看全部
-
下拉菜单（菜单项状态） 下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）： /*查看bootstrap.css文件第3049行～第3054行*/ .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #262626; text-decoration: none; background-color: #f5f5f5; } 下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名：查看全部
-
下拉菜单（对齐方式） 实现右对齐方法： Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名，如下所示：查看全部
-
上一小节讲解通过添加“divider”可以将下拉菜单分组，为了让这个分组更明显，还可以给每个组添加一个头部（标题）。如下： <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">第一部分菜单头部</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> …查看全部
-
在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>，并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。对应的样式代码： /*源码bootstrap.css文件第3034行～第3039行*/ .dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; }查看全部
-
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度查看全部
-
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。Bootstrap仅通过设置left和right来实现定位效果。.col-md-pull-12 { right: 100%; } .col-md-pull-11 { right: 91.66666667%; }查看全部
-
我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。 不一定列和要12 实现原理非常简单，就是利用十二分之一（1/12）的margin-left。然后有多少个offset，就有多少个margin-left 不过有一个细节需要注意，使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示查看全部
-
网格系统用来布局，其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式，在这一节中所涉及到的示例，我们都以中屏（970px）为例进行介绍 列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性 <div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">.col-md-8</div> </div> <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 class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-6">.col-md-6</div> <div class="col-md-3">.col-md-3</div> </div> </div>每一排的col-md-数字加起来和等于十二 实现列组合方式非常简单，只涉及两个CSS两个特性：浮动与宽度百分比。查看全部
-
试一试如果每行网格数超过12会怎么样？ A:当超过12行的时候，会自动进行换行!查看全部
-
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。查看全部
-
除了使用glyphicon.com提供的图标之外，还可以使用第三方为Bootstrap框架设计的图标字体，如Font Awesome(http://www.bootcss.com/p/font-awesome/)。使用方法和上面介绍的一样，不过记得将字体下载到你本地。查看全部
-
。在Bootstrap框架中也为大家提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果 Bootstrap框架中的图标都是字体图标，其实现原理就是通过@font-face属性加载了字体。 在Bootstrap框架中有一个fonts的目录，这个目录中提供的字体文件就是用于制作icon的字体文件。 自定义完字体之后，需要对icon设置一个默认样式，在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码：查看全部
-
请问一下怎么控制图片的大小，能给个代码吗 控制图片大小，你可以在img标签中通过width和height来控制，如果你需要制作响应式图片，可以给img设置一个width:100%查看全部
举报
0/150
提交
取消