回到目录 Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的! 今天主要说下页面的布局,这是最基础的东西了,当我们设计一个站点时,应该为它设计一个全局性的统一的规范页面,这种页面我们叫它布局页,而在页面上体现出来的东西,就是布局的元素,在bootstrap里当然也是不可缺少的东西. Bootstrap的布局是一种栅格系统,即它由行和列组成,在使用时需要为页面内容和栅格系

首先,我们必须明确,在这四种角色登录网站,看到页面是不同,这里不仅涉及到后端的权限控制,还涉及到前端页面的布局,区分好这些角色看的东西哪些是相同的,哪些又是不同的呢,这个必须在这里想明白,所以要做好页面布局 页面布局,去到bootstrap中文网,寻找适合自己的布局实例,然后右击保存页面下载代码,copy代码到自己的项目,然后删删改改,当然完全可以自己用boottrap进行页面布局也是可以的,主要看你是否要求对前端精深,时刻明确自己的目的,学会借力打力,这样做才有效率,否则事事亲力亲为,尤其是在

网页中标记代码内容使用code和pre标签 要在HTML中显示标签本来的样子需要转化为实体 在此附上百度的实体字符:http://baike.baidu.com/view/4757776.htm#3 code标签标注行内的代码内容 我要在代码中显示如下效果: 需要这么使用code标签 在前面几节中有是否还是记得:我们在 <code><div></div></code>标签中添加了一个类<code>.page-header</code>

1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示: 2.给需要的元素添加一个容器,使其居中显示 <div class='container'> <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> </div&g

代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar navbar-fixed-top:导航固定显示在顶部,对应的navbar-fixed-bottom:导航固定显示在页面底部 .brand:提示文字或者主题 .active:激活选中 .navbar-search:导航搜索 搜索表单: <form class='navbar-search'> &l

代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> <div class='carousel slide' id='carousel1'> <div class='carousel-inner'> <div class='item active'> <img src='http://placehold.it/1246x360/

<div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如果用的a标签,href='#collapse1'--> <a href='#collapse1' class='btn btn-primary' data-toggle='collapse'>点击显示内容</a> <!--button标签中指向data-target='#c

提示信息的设计 提示信息的类: .alert:提示信息类 .alert alert-danger: .alert alert-error: .alert alert-success: .alert alert-info: .alert alert-block: .alert alert-heading: 提示信息按钮: <a href='javascript:;' class='close' data-dismiss='alert'></a> 代码块: <div class=

代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> <!-- 选项卡:通过BS的类来控制选项卡的样式 ?处可以换成以下几个类 .nav-tabs:如图1 .nav-pills:如图2 .nav-tabs nav-stacked:如图3 --> <ul class='nav ?'> <li class='active'><a

列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编辑器</li> <li>TinyMCE编辑器</li> <li>Kindeditor编辑器</li> </ul> 如图: 有序列表: <ol> <li>Ueditor编辑器</li> <li>

旨在优化不同上网设备中页面显示的优化 响应式布局:就是根据浏览窗口的尺寸,改变页面的变化 原理:利用css的media-queries判断浏览窗口的尺寸,在CSS样式表中设置一些规则! 例如: 在<style></style>标签中输入如下css3的格式实现: <style> body {background:green;} //注意这里不能写成行内样式,使用CSS样式定制样式 @media (max-width:767px) {body{background:red}

嵌套布局: 在一行中,有三列,每一列都有对应的BS栅格系统中的格子,以下例中因为 .row中的div对应的class分别是span4,span4,span4,所以其每一列对应的格子数是 4,4,4 现在有一个需求,要在第三列中另外再布局出2列,且这2列宽度相同那么操作如下:看彩色部分 <div class='row'> <div class='span4'> <h2>栏目一</h2> <p>段落1</p> </div> &

如图所示: bootstrap布局基于HTML5,为了使IE8以下也能使用某些HTML5的标签,必须要引入文件:http://html5shiv.googlecode.com/svn/trunk/html5.js,但是国情的原因,使用不了,所以使用以下代码直接插入到html的head标签中,一定要写入head标签中使浏览器先“看到”这句: <!--[if IE]> <script> (function(){if(e = "abbr,article,aside,audio,

当鼠标点击在一个a连接上时,显示提示文字的效果 ----------------  tooltip <div class='container-fluid'> <h3 class='page-header'>Bootstrap 工具提示</h3> <p style='text-align:center;'><a href='#' rel='tooltip' title='http://www.taobao.com'>淘宝网</a>&l

<div class='container-fluid'> <h2 class='page-header'>Bootstrap 缩略图</h2> <ul class='thumbnails'> <li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片1' /></a><

导航路径:又叫“面包屑”,功能是让用户知道所处的位置. <!--面包屑--> <ul class='breadcrumb'> <li><a href='#'>首页</a> <span class='divider'>></span></li> <li><a href='#'>餐厅列表</a> <span class='divider'>></sp

首先看看这个代码: <div class='btn-group'> <button type='button' class='btn'>计算机</button> <button type='button' class='btn'>网络</button> <button type='button' class='btn'>桌面项目</button> </div> 将功能相近的按钮分成一组,bootstrap 为我

bootstrap中的按钮类 一般可以作为按钮的标签有:<a></a>  <button></button>  <input type='button' />上面 如图: 如果要改变按钮的尺寸: .btn-large:尺寸最大: .btn-small:尺寸中等: .btn-mini:尺寸最小 为按钮添加小图标: i标签表示添加的小图标: icon-comment 图标的颜色:默认是黑色,还可以设定白色为 .icon-white <butto

表单之 文本框 text <input type='text' value='' placeholder='输入您的用户名' class='input-mini' /> ①几个类控制文本框长度 input-mini:最小 如图: input-small:次小 如图: input-medium:中等 如图: input-max:最长 如图: spanN:N代表数字,最大12,N表示1个网格的宽度 例如:span4表示对应的input框占用4个网格的宽度 ②属性:placeholder="

①了解需要怎样的表格标签结构 ②bootstrap为我们提供了一些类来变换表格样式 1.table中添加 <table class='table'></table> 如图: 2.table中添加 <table class='table table-striped'></table> -- 奇偶行背景色区别 如图: 3.table中添加<table class='table table-bordered'></table> -- 表格显

首先引入文件bootstrap-responsive.css <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> bootstrap-responsive.css这个样式表已经为我们针对常用的上网设备做好了相应的响应式设计: 比如: 分辨率宽度1200像素以上的屏幕上,网格的宽度会由60px变为70px,且网格与网格之间的距离由20px变为30px 在平板电脑的垂直状