其他分享
首页 > 其他分享> > bootstrap 笔记3

bootstrap 笔记3

作者:互联网

bootstrap layout   Bootstrap Glyphicons bootstrap字体图标 1.definition:·字体图标是在web项目中使用的图标字体 2.css规则解释 3.syntax: <span class="glyphicon glyphicon-search"></span> 4.定制字体图标 example: <button tvpe="button" class="btn btn-primary btn-1g"> <span class="gyphicon glyphicon-user"></span> User </button> 定制字体尺寸:font-size 定制字体颜色:color 应用文本阴影:text-shadow     Bootstrap Dropdowns bootstrap 下拉菜单 1.definition:下拉菜单,以列表格式显示链接的上下文菜单。 2.example: <!DOCTYPE html> <html> <head> <title>Bootstrap实例-下拉菜单(Dropdowns) </title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/iquery.min.is"></script> <script src="/bootstrap/is/bootstrap.min.js"></script> </head> <body> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"data-toggle="dropdown">主题<span class="caret">s/span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Javak</a></1i> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">数据挖掘</a></1i> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">数据通信/网络</a></li> <li role="presentation" class="divider"></1i> <1i role="presentation"><a role="menuitem" tabindex="-1" href="#">分离的链接</a></1i> </ul> </div> </body> </html> 3.样式 对齐: 向右对齐 .pull-right添加在dropdown-menu class 类 <ul class="dropdown-menu pull-right" role= "menu"> 标题: dropdown-header向下拉菜单的标签区域添加标题 <li role="presentation" class="dropdown-header">   bootstrap button bootstrap 按钮组 1.按钮组允许讲多个按钮堆叠在同一行上 2.一些主要的class   3.按钮组 1)基本的按钮组 <div class="btn-group"> <button type="button" class="btn btn-default">按钮1 </button> <button type="button" class="btn btn-default">按钮2</button> <button type="button" class="btn btn-default">按钮3 </button> </div> 2)按钮工具栏:获得更复杂的组件 <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">按钮1 </button> <button type="button" class="btn btn-default">按钮2</button> <button type="button" class="btn btn-default">按钮3 </button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">按钮1 </button> <button type="button" class="btn btn-default">按钮2</button> <button type="button" class="btn btn-default">按钮3 </button> </div> </div> 3)按钮的大小 btn-group-* 4)按钮的嵌套 btn-group 嵌套一个btn-group 5)垂直的按钮 btn-group-vertical <div class="btn-group-vertical"> <button type="button" class="btn btn-default">按钮1</button> <button type="button" class="btn btn-default">按钮2</button> </div> 6)bootstrap 按钮下拉菜单 在一个.btn-group中放置按钮和下拉菜单 基本的—— <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 默认<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div> 分割的—— <div class="btn-group"> <button type="button" class="btn btn-default">默认</button> <button type="button" class="btn btn=default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">切换下拉菜单</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div> 7)按钮下拉菜单的大小 .btn-large .btn-sm或者.btn-xs 8)按钮上拉菜单 向.btn-group容器添加.dropup即可   bootstrap input bootstrap 输入框组 note:避免使用<select>元素;不要向表单组应用输入框组的class,输入框组是一个孤立的组件 1)基本的输入框组 <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control placeholder="twittorhandle"> </div> <span>和<input>元素放置的次序影响排版 2)输入框的大小 向,input-group添加相对与表单大小的class(input-group-lg input--group-sm input-group-xs) 3)单选框和复选插件(将其作为输入框组的前缀或者后缀元素) <div class="input-group"> <span class="input-group-addon"> <input type="checkbox|radio"> </span> <input type="text" class="form-control"> </div> 4)按钮插件(同上) note:不能用input-group-addon,而要使用input-group-btn 基本—— <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go! </span> <input type="text" class="form-control"> </div> 带有下拉菜单的—— <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 默认<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> <input type="text" class="form-control"> </div> </div> 分割的—— (参照其上)   Bootstrap Navigation Element bootstrap 导航元素 1.table navigation or labels 表格导航或标签 创建一个标签式的导航菜单: 以一个带有class .nav的无序列表开始 添加class .nav-tabs <ul class="nav nav-tabs"> <li class="active"><a href="#">home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">IOS</a></li> <li><a href="#">VB.Net</a></li> </ul> 2.capsule navigation menu 胶囊式的导航菜单 1)基本的导航式菜单 将nav-tabs改为nav-pills即可 example:文件中 <ul class="nav nav-pills"> <li class="active"><a href="#">home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">IOS</a></li> <li><a href="#">VB.Net</a></li> </ul> 2)垂直的胶囊式导航菜单 在使用nav-pills的同时加上 .nav-stacked 即可 <ul class="nav nav-pills nav-stacked"> 3)两端对齐的导航 在屏幕宽度大于768px时,通过分别使用.nav, .nav-tabs或.nav, .nav-pills的同时,使用class.nav-justified,让标签式或胶囊式导航菜单与父元素等宽。 <ul class="nav nav-pills/nav-tabs nav-justified"> <li class="active"><a href="#">home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">IOS</a></li> <li><a href="#">VB.Net</a></li> </ul> 4)diabled links禁用链接 每个.nav class,如果添加 disabled class,则会创建一个灰色的链接,同时禁用了该链接的:hover状态 <li class="disabled"><a href="#">V(禁用链接</a></li> 3.Drop-down menu 下拉菜单 创建有下拉菜单的标签 以一个带有class.nav的无序列表开始 添加class.nav-tabs. 添加带有.dropdown-menu class的无序列表 <ul class="nav nav-tabs|nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">IOS</a></li> <li><a href="#">VB.Net</a></li> <li class="dropdown"> <a class="dropdown-toggle " data-toggle="dropdown" href="#">java<span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#" >Swing</a></li> <li><a href="#" >JMeter</a></li> <li><a href="#" >EJB</a></li> <li class="divider"></li> <li><a href="#" >分离的链接</a></li> </ul> </li> </div>   bootstrap Navigation Bar bootstrap 导航栏 1.默认的导航栏 创建一个默认的导航栏: 向<nav>标签添加class.navbar, .navbar-default 向上面的元素添加role="navigation",有助于增加可访问性 向<div>元素添加一个标题class .navbar-header,内部包含带有class navbar-brand的<a>元素。这会让文本看起来更大一号。 为了向导航栏添加链援,只需要简单地添加带有class navbar-nav的无序列表即可 <nav class="navbar navbsr-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div> <ul class=“nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">IOS</a></li> <li><a href="#">VB.Net</a></li> <li class="dropdown"> <a class="dropdown-toggle " data-toggle="dropdown" href="#">java<span class="caret"> </span> </a> <ul class="dropdown-menu"> <li><a href="#" >Swing</a></li> <li><a href="#" >JMeter</a></li> <li><a href="#" >EJB</a></li> <li class="divider"></li> <li><a href="#" >分离的链接</a></li> </ul> </li> </div> 2)响应式的导航栏 使用bootstrap折叠插件(collapse) 折叠起来的导航栏实际上一个带有class .navbar-toggle和两个data-元素的按钮 3)导航栏中的表单 导航栏中的表单时使用.navbar-form class 4)导航栏中的按钮 可以使用class .navbar-btn 向不在form中的<button>元素添加按钮,按钮在导航栏上垂直居中,navbar-btn可以用在<a>和<input>元素上 note:不要在.navbar-nav内的<a>上使用.navbar-btn 5)导航栏中的文本 使用class .navbar-text 6)非导航链接 class .navbar-link为默认的和倒装的导航栏添加适当的颜色 7)组件对齐方式 对齐:class .navbar-right .navbar-left 8)固定到顶部与底部 bootstrap导航栏可以动态定位,默认情况下,它是块级元素,基于在html中放置的位置定位的。 固定到顶部:向.navbar class 添加 class navbar-fixed-top note:防止导航栏与页面主体中的其他内容的顶部相交错,向<body> tag 添加至少50像素的内边距 固定到底部:向.navbar class 添加 class navbar-fixed-buttom 8)静态的顶部 能随着页面一起滚动的导航栏,添加.navbar-static-top (不要求向<body>添加内边距) 9)倒置的导航栏 创建一个带有黑色背景白色文本的倒置的导航栏:向.navbar class 添加.navbar-inverse class note:防止导航栏与页面主体中的其他内容的顶部相交错,向<body> tag 添加至少50像素的内边距 5.bootstrap breadcrumbs面包屑导航 面包屑导航时一种基于网站层次信息的显示方式。表示当前页面在层次结构中的位置 bootstrap 中的面包屑导航时一个简单的带有.breadcrumb class的无序列表     bootstrap paging bootstrap分页 分页(pagination):是一种无序列表 处理分页的class   1)默认的分页 class .pagination 2)分页的状态 class .disabled ; .active 3)分页的大小 class .pagination-* .pagination-lg;.pagination.sm 4)翻页(pager) 翻页:创建一个简单的分页链接为用户提供导航 默认的翻页:pager 对齐的链接:class .previous .next的用法 翻页的状态: class .disabled   bootstrap label bootstrap 标签 标签:可以用于计数、提示或者页面上其他的标记。 class .label:显示标签 改变标签的外观:class label-default label-primary label-success label-info label-warning label-danger   bootstrap badges bootstrap 徽章 1)bootstrap会长和标签相似,主要区别在于徽章的边角更加圆滑 徽章主要用于突出显示新的或未读的项,使用徽章:class=“badge” 2)激活导航状态 可以在激活状态的胶囊式导航和列表导航中放置徽章,使用<span class="badge">来激活链接   bootstrap jumbotron bootstrap 超大屏幕 1)使用超大屏幕的步骤 创建一个带有class jumbotron.的容器<div> 除了更大的<h1>,字体粗细font-weight被减为200px 2)获得占用全部宽度且不带圆角的超大屏幕:在所有.container class 外使用 jumbtron class   bootstrap page header bootstrap 页面标题(页眉) 页面标题功能:在网页标题四周添加适当的间距 使用:将 class .page-header 放在<div>中   bootstrap 缩略图 1)使用缩略图的步骤 在图像周围添加带有class .thumbnail的标签。 这会添加四个像素的内边距(padding)和一个灰色的边框。 当鼠标悬停在图像上时,会动画显示出图像的轮廓。 2)添加自定义内容 可以向缩略图中添加各种HTML内容,比如标题、段落和按钮 步骤: 把带有class .thumbnail的<a>标签改为<div> 在该<div>中,可以添加任何你想要添加的东西 如果要对图像进行分组,放置在一个无序列表中,且每一个列表项向左浮动   bootstrap alerts bootstrap 警告 1)警告向用户提供了一种定义消息样式的方式,他们为典型的用户操作提供了上下文反馈 2)创建一个内联的可取消的警告框:Alert jQuery插件 3)添加一个基本的警告框:向一个<div>中添加 .alert class和四个上下文 class (.alert-success .alert-info .alert-warning .alert-danger)之一 4)可取消的警告: 向一个<div>中添加 .alert class和四个上下文 class (.alert-success .alert-info .alert-warning .alert-danger)之一来完成一个基本的警告框 同时向上面的<div> class添加可选的.alert-dismissable. 添加一个关闭按钮 important code: <button type="button"class="close" date-dismiss="alert" aria-hidden="true"> × </button> note:请确保使用带有 data-diasmiss="alert" data 属性的<button>元素 5)警告中的链接 步骤: 向一个<div>中添加 .alert class和四个上下文 class (.alert-success .alert-info .alert-warning .alert-danger)之一来完成一个基本的警告框 使用 .alert-link实体类来快速提供带有匹配颜色的链接   bootstrap progress bar bootstrap进度条 1)默认的进度条 创建一个基本进度条的步骤: 添加一个带有class.progress的<div> 在<div>内添加一个带有class.progress-bar的空的<div> 添加一个带有百分比表示的宽度的style属性 2)交替的进度条 创建一个交替的进度条: 添加一个带有class.progress的<div> 在<div>内添加一个带有class.progress-bar和progress-bar-*(*可以是success ,info,warning,danger)的<div> 添加一个带有百分比表示的宽度的style属性 3)条纹的进度条 创建一个条纹的进度条: 添加一个带有class.progress和.progress.striped的<div> 在<div>内添加一个带有class.progress-bar和progress-bar-*(*可以是success ,info,warning,danger)的<div> 添加一个带有百分比表示的宽度的style属性 4)动画的进度条 创建一个动画的进度条: 添加一个带有class.progress和.progress-striped 的<div>,同时添加class.active 在<div>内添加一个带有class.progress-bar和progress-bar-*(*可以是success ,info,warning,danger)的<div> 添加一个带有百分比表示的宽度的style属性 5)堆叠的进度条 将多个进度条放在相同的.progress中即可实现堆叠     bootstrap media object bootstrap 多媒体对象 1)两种形式来设置多媒体对象 .media:允许将多媒体对象里的多媒体(图像、音频、视频)浮动到内容区块的左边或者右边 .media-list:可用于评论列表与文章列表   bootstrap list Group bootstrap列表组 1)创建一个基本的列表组 向元素<ul>添加class .list-group 向<li>添加 class .list-group-item 2)向列表组添加徽章 在<li>元素中加入<span class="badge"> 3)向列表组添加链接 4)向列表组添加自定义内容     bootstrap panels bootstrap 面板 面板足迹用于讲DOM组件插入到一个盒子里 1)创建一个基本的面板 向<div>元素中添加class.panel和class.panel-default即可 2)添加面板标题 使用.panel-heading class 使用带有.panel-title class的<h1>-<h6>添加预定义样式的标签 3)面板脚注 把按钮或者附文本放在class.panel-footer的<div>中即可 4)带语境色彩的面板 语境状态类:panel-primary panel-successs panel-info panel-warning panel-danger 5)带有表格的面板 创建一个无边框的表格:class.table 有一个包含.panel-body的<div>,向变革的顶部添加额外的边框用来分割 若无,组件会无中断地从面板头部移动到表格 6)带有列表组的面板     bootstrap well well是一种会引起内容凹陷显示或插图效果的容器<div> 直接将内容放在class well的<div>中即可 1)修改尺寸大小:well-lg well-sm  

标签:navbar,bootstrap,笔记,添加,按钮,导航,class
来源: https://www.cnblogs.com/star-bloom-blog/p/14752998.html