分享好友 前端技术首页 频道列表

BootStrap栅格系统原理 笔记

bootstrap  2023-02-08 19:560

1.内容居中:效果

BootStrap栅格系统原理 笔记

关键代码:

<div class="container"> .........之前上面添加在body标签下的代码 </div>
添加class=“container”之后,div里内容如图居中。


2.类似Table的栅格系统:效果

BootStrap栅格系统原理 笔记

 

关键代码:

首先为三个区域添加一个容器,可以使用div,并且为div添加一个类 <div class="row">.
然后我们为每个小的区域也添加一个容器div,并且为div添加一个类<div class="col-xs-4">
简单代码实现如下:

 <div class="container"> <h1>Hello, world!</h1> <div class="row"> 

<div class="col-xs-4"> <h2 class="page-header">区域一</h2> <p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p> </div>

<div class="col-xs-4"> <h2 class="page-header">区域二</h2> <p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p> </div>

<div class="col-xs-4"> <h2 class="page-header">区域三</h2> <p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p> </div>

</div> </div>

 

默认一共12列, 这边设置“col-xs-4”,然后就是被 平均分成 3列了,每列包含4小列(也就是占据的 栅格列数目),这边“4“的范围是 1~12,

 如果要平均分成2列,则 用 “col-xs-6”

查看更多关于【bootstrap】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
Bootstrap基础:选择器
1.CSS属性选择器[arrt=value]   该属性有指定的确切值[arrt~=value]  该属性值必须是多个空格隔开的值,比如,class=“title featured home”,而且这些值中的一个必须是指定的值“value”[arrt|=value]  属性的值就是“value”或者以“value”开始并立即

0评论2023-03-16469

Bootstrap.css 中请求googleapis.com/css?family 备忘录
问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");     国内访问不稳定,页面反应慢解决:将请求结果保存下来,放到本地,重新声明请求1.请求http:

0评论2023-03-16312

基于.NET6、FreeSql、若依UI、LayUI、Bootstrap构建插件式的CMS
近几年,.net生态日益强大,特别是跨平台技术,性能提升,那真的是强大无比。为了日常能够快速开发,笔者基于基于.NET6、FreeSql、若依UI、LayUI、Bootstrap构建插件式的CMS,请大家多提意见建议。在此,要感谢若依CMS的作者,借用了皮肤框架。懒的发文字描述

0评论2023-03-16505

elasticsearch bootstrap.memory_lock
检查bootstrap.memory_lock设置是否生效get http://10.127.0.1:9200/_nodes?filter_path=**.mlockall响应:{"nodes": {"9giihmDNRdS136KT52Gl5g": {"process": {"mlockall": true}},"X0zQESeeT8uJ9kVXvHpl-w": {"process":

0评论2023-03-08659

50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。本文向你推荐 50 个 Bootstrap 的插件,可以考虑在你下一个项目中使用它们。1. Boots

0评论2023-03-08629

Bootstrap资源 bootstrap官方文档
官方网站:http://getbootstrap.com/http://twitter.github.com/bootstrap/index.html 官方博客:http://blog.getbootstrap.com/  中文文档:http://wrongwaycn.github.com/bootstrap/docs/index.html  图标:Font Awesomehttp://fortawesome.github.com

0评论2023-03-08321

bootstrap bootstrap检验
bootstrap是简洁灵活的用于搭建web页面的Html,Css工具集。---是一组简洁强大的前端开发框架。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。是一个CSS/HTML框架。bootstrap中的js框架依赖于jquery,因此jquery要在bootstrap之前引进一般要把CS

0评论2023-03-08325

002-BootStrap基本模板 bootstrap 模型
!DOCTYPE htmlhtml lang="zh-CN"headmeta charset="utf-8"!--声明文档兼容模式,表示使用IE浏览器的最新模式--meta http-equiv="X-UA-Compatible" content="IE=edge"!--设置视口的宽度(值为设备的理想宽度),页面初始缩放值理想宽度/可见宽度--meta name="vie

0评论2023-03-08506

003-BootStrap完整模板 bootstrap demo
!DOCTYPE htmlhtml lang="zh-CN"headmeta charset="utf-8"!--声明文档兼容模式,表示使用IE浏览器的最新模式--meta http-equiv="X-UA-Compatible" content="IE=edge"!--设置视口的宽度(值为设备的理想宽度),页面初始缩放值理想宽度/可见宽度--!--视口的作用

0评论2023-03-08910

nginx 下 bootstrap fa 字体异常问题
server {listen 8082;#server_name192.168.16.88; #root/home/ywt/workspace/kuF/web/statics;#autoindex on; #autoindex_exact_size off; #autoindex_localtime on; # } 原配置如上,实际图标加载出来乱七八糟; 经过具体分析,实际css文件正常加载,字体

0评论2023-03-08960

bootstrap 响应式布局
先上点媒体查询css(某个著名的”段子“),跟bootstrap无关:htmlheadstylebody {background-color: white;}@media screen and (max-width: 960px){body {background-color: red;}}@media screen and (max-width: 768px){body {background-color: yellow;}}@

0评论2023-03-08482

bootstrap bootstrap用什么软件
bootstrap:简易模版:meta http-equiv='X-UA-Compatible' content='IE=edge' //让IE浏览器运行最新的渲染模式//meta name='renderer' content='webkit'让部分国产浏览器默认采用高速模式渲染页面meta name='viewport' content='width=device-width,initail-

0评论2023-03-08809

bootstrap怎样让按钮或者组件左右对齐 bootstrap怎么调整组件的位置
1.登录页的form表单可以是使用margin:0 auto的方式,居中对齐 2.div可以使用pull-right, text-center, pull-left 3.按钮或者p标签可以使用text-right, text-center, text-left

0评论2023-03-08949

更多推荐